前言
使用css很多年了，每次使用media都需要上網查詢一下，具體用法也沒記住，本篇文章就幫你詳細完整的介紹@media的用法，希望你可以更加了解@media的用法。如有不正確之處，還望指出，謝謝！
語法
@media: <media_query_list>
<media_query_list>: [<media_query> [’,’ <media_query>]]?
<media_query>: ([only | not ]? <media_type> [and ]) | ( [and ]*)
: ‘(’<media_feature>[:]?’)’
大致解釋下：
- @media後面可以添加多個query，使用‘,’分隔
- query有兩種寫法一種使用media_type
([only | not ]? <media_type> [and <expression>]*)
一種不使用media_type
(<expression> [and <expression>]*)
- media_type： 媒體類型
- expression： 指定媒體查詢使用的媒體特性, 類似於css屬性（如：max-width: 200px）
如果不是很明白，看完下面的例子，你就會很清楚了
舉例之前，我們先了解media_type和expression都可以有那些值可以選擇
media_type：媒體類型
expression 指定媒體查詢使用的媒體特性, 類似於css屬性（如：max-width: 200px）
用法（4種用法）
- @import中的使用
@import url(test.css) (width:800px);
@import url(test.css) (width:800px) and (height:700px);
@import url(test.css) screen and (width:800px);
@import url(test.css) all and (max-width:500px), only screen and (min-width:1000px);
@import url(test.css) only screen and (max-width:500px), only screen and (min-width:1000px);
- link中的使用
<link rel="stylesheet" href="test.css" media="(width:800px)">
<link rel="stylesheet" href="test.css" media="(width:800px) and (height:700px)">
<link rel="stylesheet" href="test.css" media="screen and (max-width:800px)">
<link rel="stylesheet" href="test.css" media="all and (max-width:500px), only screen and (min-width:1000px)">
<link rel="stylesheet" href="test.css" media="only screen and (max-width:500px), only screen and (min-width:1000px)">
- css中的使用
@media (width:800px){ … }
@media (width:800px) and (height:700px){ … }
@media screen and (max-width:800px){ … }
@media all and (max-width:500px), only screen and (min-width:1000px){ … }
@media only screen and (max-width:500px), only screen and (min-width:1000px){ … }
- xml中的使用
xml中使用較少，用法同上面類似。這裏就不舉例了
以上就是@media的全部使用方法，如如有不正確之處，還望指出，謝謝！
**
關注我：前端Jsoning
**
