# Media Queries工作方式
## 在media屬性里：
● screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
● and 被稱為關鍵字，其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)
● (min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的特性參看 相關的Media features部分
## 調用方式
>[success]調用方式常用的有兩種
>
1. 種是直接在link中判斷設備的尺寸，然后引用不同的css文件：
~~~css
/* 意思是當屏幕的寬度大于等于400px的時候，應用styleA.css */
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
~~~
~~~
/* 意思是當屏幕的寬度大于600小于800時，應用styleB.css */
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
~~~
2. 另一種方式，即是直接寫在 style 標簽里：
~~~css
@media screen and (max-width: 600px) { /*當屏幕尺寸小于600px時，應用下面的CSS樣式*/
.class {
background: #ccc;
}
}
~~~
>[danger]寫法是前面加@media，其它跟link里的media屬性相同。
