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;
  }
}