舉例:@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è)備*/
}