媒体查询如何使用

媒体查询的用法@media

语法： @media 媒体类型 and (媒体特性) {你的样式}

最大宽度

max-width 是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px) {
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于 480px 时，页面中包含类样式 .ads 的元素都将被隐藏。

最小宽度

min-width 与 max-width 相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width: 900px) {
    .wrapper {width: 980px;}
}

上面表示的是：当屏幕大于或等于 900px 时，页面中包含类样式 .wrapper 元素的宽度为 980px。

多个媒体特性的使用

媒体查询可以使用关键词 and 将多个媒体特性结合在一起。也就是说，一个媒体查询中可以包含 0 到多个表达式，表达式又可以包含 0 到多个关键字，以及一种媒体类型。

当屏幕在 600px~900px 之间时，body 的背景色渲染为 #F5F5F5 ，如下所示：

@media screen and (min-width:600px) and (max-width:900px) {
  body {background-color:#F5F5F5;}
}