舉例：@media only screen and
only: 限定某種設(shè)備；
screen： 是媒體類型中的一種，其他還有print/handheld/tv/tty等；
and： 關(guān)鍵字，其他關(guān)鍵字還包括not(排除某種設(shè)備)；
1. 常用場景：
a.?
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:600px) and (max-width:800px)">
---表示style.css只應(yīng)用于屏幕的寬度是在大于600px小于800px的情況下；
b.
@media screen and (max-width:600px){
.class{
? background: #ccc;
}
}
---表示屏幕寬度小于600px時(shí)，#ccc背景顏色生效；
2. device-aspect-ratio
當(dāng)需求是要對(duì)某種長寬比的屏幕做特殊樣式的情況下使用
@media only screen and (device-aspect-ratio:4/3)
3. only ?： 一般來說，用only是看不出效果的，這樣采用效果：
@media all and (min-width:xxx) and (max-width:xxx){
? ? ? /*這段查詢的all是針對(duì)所有設(shè)備(有些設(shè)備不一定是屏幕，也許是打字機(jī)，盲人閱讀器)*/
}
@media only screen and (min-width:xxx) and (max-width:xxx){
? ? ? ? ?/*上面針對(duì)了所有設(shè)備，這段是只(only)針對(duì)彩色屏幕設(shè)備*/
}
