css中媒体查询

媒体查询可以根据设备显示器的特性（如视口宽度，屏幕比例和设备方向）设定css的样式。媒体查询由媒体类型和一个活多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width，height，和color等。使用媒体查询，可以在不改变页面的内容的情况下，为一些特定的输出设备定制显示效果。
使用媒体查询的步骤如下。
（1）在html的＜meta>标签中，添加viewport属性的代码。

＜meta name="viewport content="width=device-width,
initial-scale=1,maximum-scale=1，user-scalable=no"/>

（2）使用@media关键字，编写css媒体查询代码，比如:当设备屏幕宽度在320px和720px之间时，媒体查询中设置body背景颜色background-color属性值为red，会覆盖原来的body背景颜色，当设备屏幕宽度小于320px时，媒体查询中设置body背景颜色为background-color属性值为blue，会覆盖原来的背景颜色，具体代码在下面。

/*，当设备屏幕宽度在320px和720px之间时*/
@media screen  and （max-width:720px）and（min-width:320px）{
     body{
           background-color:red;
             }
    /*当设备屏幕宽度小于等于320px时*/
    @media screen and （max-width:320px）{
         body{
              background-color:blue;
         }
      }
   }