Css——媒体查询

@media mediatype where (media feature) {
   /* CSS样式 */
}
属性 备注
mediatype 媒体类型:screen(电脑屏幕、平板电脑、智能手机)、print(打印预览)、all(所有设备)
where 条件:and(表示可以将多个媒体特性连接到一起,相当于“且”的意思)、not(表示排除某个媒体类型,相当于“非”的意思)、only(表示指定某个特定的媒体类型)
media feature 媒体特性:width(窗口=值生效)、min-width(窗口>=值生效)、max-width(窗口<=值生效)

例子

/* 当浏览器宽度等于1000px时背景变为粉色 */
@media screen and (width: 1000px){
  body{
    background: pink;
  }
}
/* 当浏览器宽度大于或等于1200px时背景变为天蓝色 */
@media screen and (min-width: 1200px){
  body{
    background: skyblue;
  }
}
/* 当浏览器宽度小于或等于900px时背景变为棕色 */
@media screen and (max-width: 900px){
  body{
    background: sienna;
  }
}

你可能感兴趣的:(css,css,媒体,前端)