媒体查询

语法

<media_query_list>：[<media_query>[',' <media_query>]*]? 相当于or
<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>：'('<media_feature>[:<value>]?')'

媒体查询的使用

• css样式中

      @media screen and (min-width: 320px){
          ...
      }
              

• @import url(...)后

      @import url(example.css) screen and (width:800px);
              

• link标签的media属性

      <link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" />
              

媒体类型 Media Types

媒体特性 Media Features

参考

• CSS媒体查询