媒體查詢放到后面幻件，普通樣式放在前面
終于等來了CSS3的Media Queries啸胧，可以讓我們針對不同的設(shè)備場景使用不同的CSS
頁面有些部分需要在打印的時候隱藏或者變大借杰，這時候可以使用media使某些style只在打印的時候生效
@media print {
/* 適用于印刷的樣式 */
}
@media是一種指令斩箫，告訴瀏覽器這是媒體查詢里伯。
常用的媒體類型有
- all（所有），適用于所有設(shè)備崎弃。
- handheld（手持）甘晤，用于手持設(shè)備。
- print（印刷）饲做，用于分頁材料以及打印預(yù)覽模式下在屏幕上的文檔視圖线婚。
- projection（投影），用于投影演示文稿盆均，例如投影儀塞弊。
- screen（屏幕） ，主要用于計算機屏幕泪姨。
CSS 3
@media screen and (max-width: 990px){
.container{
background: orange;
}
}
當(dāng)媒體類型匹配且表達式為真的時候游沿，對應(yīng)style就會其作用，除非使用not或者only操作符肮砾，否則媒體類型不是必需的诀黍，默認代表所有媒體類型。
操作符
and
and操作符用于將多個media feature組合成一個查詢仗处，同時用于組合media type 和media feature眯勾，一個基本的media query類似這樣，一個meidia feature作用于所有media type
@media (min-width: 700px) { ... }
但是如果只想在橫向顯示時應(yīng)用就可以使用and操作符把media type和media feature結(jié)合起來
@media (min-width: 700px) and (orientation: landscape) { ... }
這樣上面的media query只有在可視窗口（viewport）最小是700px并且是橫向顯示的時候才返回true疆柔，如果還想進一步限制設(shè)備為tv可以這樣
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
逗號分隔的列表
在使用逗號分隔的查詢列表中每個查詢都被視為一個獨立的查詢咒精，任何本查詢中的作用符不影響其他查詢镶柱，只要有一個查詢返回true旷档，style就會被作用。
舉例來說歇拆，如果希望特定style在viewport最小寬度為700px或手持式設(shè)備上生效鞋屈，可以這么寫：
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not
not操作符作用域整個查詢，所以只有在整個查詢返回false的情況下使用not后才會返回true故觅。當(dāng)使用逗號分隔的列表的時候not作用于鄰近的查詢厂庇，而不會作用于每個查詢
@media not all and (monochrome) { ... }
查詢其實會這樣起作用
@media not (all and (monochrome)) { ... }
而不是這樣
@media (not all) and (monochrome) { ... }
對于逗號分隔的列表
@media not screen and (color), print and (color)
查詢是這樣子的
@media (not (screen and (color))), print and (color)
only
only操作符用于阻止不支持帶有media feature的media queries的瀏覽器應(yīng)用特定style
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
media features
有以下常用的media feature
width：瀏覽器寬度
height：瀏覽器高度
device-width：設(shè)備屏幕分辨率的寬度值
device-height：設(shè)備屏幕分辨率的高度值
orientation：瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時該特性值為portrait输吏，否則為landscape
aspect-ratio：比例值权旷，瀏覽器的縱橫比
device-aspect-ratio：比例值，屏幕的縱橫比
color：設(shè)備使用多少位的顏色值贯溅，如果不是彩色設(shè)備拄氯，值為0
color-index：色彩表的色彩數(shù)
monochrome：單色幀緩沖器每個像素的字節(jié)
resolution：分辨率值躲查，設(shè)備分辨率值
scan：電視機類型設(shè)備掃描方式，progressive或interlace
grid：只能指定兩個值0或1译柏，是否基于柵格的設(shè)備
如何引入media
有兩種常用的引入方式
link方法引入
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
@media引入
@media screen and (min-width: 600px) and (max-width: 800px){
選擇器{
屬性：屬性值镣煮；
}
}
