媒體查詢 是評估 True 或 False 的一種表達(dá)蠢笋。如果為True雇卷,則繼續(xù)使用樣式表。如果為False鲸睛,則不能使用樣式表娜饵。這種簡單邏輯通過表達(dá)式變得更加強(qiáng)大,能夠更靈活地對特定的設(shè)計場景使用自定義的顯示規(guī)則官辈。
簡單來講 就是在后跟一個或多個檢查特定條件(如最小的屏幕寬度)的表達(dá)式箱舞,設(shè)置的不同大小時,有不同的樣式拳亿。
編寫方法
max 最大
@media screen and (max-width : 970px) {
.arr {
display: none;
}
}
所有最大水平屏幕寬度為 970 像素的屏幕都應(yīng)使用如下 CSS 規(guī)則晴股。
@media screen 是媒體類型,也就是說肺魁,將此 CSS 應(yīng)用于所有媒體類型电湘。
(max-width:800px) 是包含媒體查詢的表達(dá)式,如果瀏覽器的最小寬度為 800 像素則會告訴瀏覽器只運(yùn)用下列 CSS鹅经。
min 最小
@media screen and (min-width : 970px) {
.arr {
display: none;
}
}
所有最小水平屏幕寬度為 970 像素的屏幕都應(yīng)使用如下 CSS 規(guī)則寂呛。該規(guī)則在示例中省略號所在的地方。對于該媒體查詢:
@media screen 是媒體類型瞬雹,也就是說昧谊,將此 CSS 應(yīng)用于所有媒體類型。
(min-width:970px) 是包含媒體查詢的表達(dá)式酗捌,如果瀏覽器的最小寬度為 970 像素則會告訴瀏覽器只運(yùn)用下列 CSS呢诬。