響應(yīng)式設(shè)計(jì)(Responsive Design)是一種讓網(wǎng)頁(yè)針對(duì)不同設(shè)備和瀏覽器響應(yīng)不同的效果的方法。而媒體查詢是響應(yīng)式設(shè)計(jì)中最常用的方法之一祠汇。
語(yǔ)法
媒體查詢包含一個(gè)媒體類型和至少一個(gè)的表達(dá)式(寬度、高度谢床、顏色等等)的媒體屬性作谭。如果媒體查詢中的媒體屬性和文檔展示的設(shè)備相符，則查詢結(jié)果為 true 鞋吉，并且媒體查詢中的所有表達(dá)式為 true 鸦做。
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!--樣式表中的媒體查詢 -->
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
邏輯操作符
and
and操作符用來把多個(gè)媒體屬性組合起來，每個(gè)屬性為true的時(shí)候返回查詢結(jié)果為真谓着。
@media (min-width: 700px) and (orientation: landscape) { ... }
not
not操作符用來對(duì)一條媒體查詢的結(jié)果進(jìn)行取反泼诱。
@media not all and (monochrome) { ... }
逗號(hào)分隔符
逗號(hào)分隔符相當(dāng)于邏輯運(yùn)算里的or
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
前半部分我用的是一個(gè)寬700px以上的屏幕設(shè)備，媒體語(yǔ)句為真赊锚。,之后的部分,表示我用的是一個(gè)手持設(shè)備的橫屏模式治筒，寬不管夠不夠700px都返回真。
only
only操作符表示在媒體查詢匹配成功的情況下應(yīng)用樣式
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
媒體屬性
Mozilla media queries 文檔里有詳細(xì)的屬性說明和用法舷蒲。
這里不再列出耸袜，需要的可以自行查閱。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The Viewport文檔介紹了說明Viewport的使用要點(diǎn)牲平〉炭颍可以和媒體查詢結(jié)合使用，讓你的響應(yīng)式布局在移動(dòng)瀏覽器上現(xiàn)實(shí)的更好。
