CSS3的media query學(xué)習(xí)攻略

segmentfault 發(fā)布時(shí)間：2015-07-21 17:54:04 作者：qiu_deqing

這篇文章主要介紹了CSS3的media query學(xué)習(xí)攻略,media query的媒體查詢經(jīng)常被用于設(shè)計(jì)響應(yīng)式網(wǎng)頁,需要的朋友可以參考下

一個(gè)媒體查詢（media query）包含一個(gè)媒體類型（media type）和至少一個(gè)表達(dá)式，用媒體特性限制樣式表的作用范圍。
語法

媒體查詢包含一個(gè)媒體類型(media type)以及一個(gè)到多個(gè)測試媒體特性(media feature)的表達(dá)式，表達(dá)式和媒體類型將根據(jù)實(shí)際情況計(jì)算的到true或者false。如果指定的媒體類型符合當(dāng)前設(shè)備并且媒體特性表達(dá)式都為真，那當(dāng)前媒體查詢?yōu)檎妗?/p>

當(dāng)一個(gè)media query為true時(shí)，對應(yīng)的樣式表按照正常樣式規(guī)則生效。指定了media query的<link>中的樣式始終會(huì)下載。

除非使用了not或者only操作符，media type是可選的，默認(rèn)值為all。
邏輯運(yùn)算符
and：用于結(jié)合多個(gè)媒體特性(media feature)到一個(gè)media query

只有所有feature表達(dá)式為真且滿足媒體類型時(shí)整個(gè)media query才為真。

以下是一個(gè)簡單media query，用于檢測media type為all時(shí)的一個(gè)media feature：

CSS Code復(fù)制內(nèi)容到剪貼板

@media (min-width: 700px) {}

當(dāng)我們需要添加限制條件是，可以使用and完成目的如下：

CSS Code復(fù)制內(nèi)容到剪貼板

@media (min-width: 700px) and (orientation: landscape) {}

上面的media query只有在viewport大于700px并且width &bt; height時(shí)生效。此時(shí)如果需要限制媒體類型為彩色電腦顯示器，可以使用and添加media type如下：

CSS Code復(fù)制內(nèi)容到剪貼板

@media screen and (min-width: 700px) and (orientation: landscape) {}

,逗號運(yùn)算符：用于結(jié)合多個(gè)media query，任一media query為true時(shí)應(yīng)用樣式。

逗號運(yùn)算符相當(dāng)于邏輯運(yùn)算符中的or。逗號分隔的每一個(gè)media query都需要進(jìn)行單獨(dú)求值，使用在某一個(gè)media query上的其他運(yùn)算符不會(huì)影響到其他media query。

如果需要在大于700px寬的所有設(shè)備或者寬度大于高度的彩色電腦屏幕上應(yīng)用樣式，可以使用如下規(guī)則：

CSS Code復(fù)制內(nèi)容到剪貼板

@media (min-width: 700px), screen and (orientation: landscape) {}

not：用于對整個(gè)media query結(jié)果取反,必須位于一個(gè)media query的開頭

在逗號分隔的多個(gè)media query中，not只對它作用的media query生效。not不能對單個(gè)media feature取反，只能作用于整個(gè)media query

例1：如下面的not將在最后求值：

CSS Code復(fù)制內(nèi)容到剪貼板

@media not all and (monochrome) {}

等價(jià)于下面的query：

CSS Code復(fù)制內(nèi)容到剪貼板

@media not (all and (monochrome)) {}

例2：下面的多個(gè)media query求值

CSS Code復(fù)制內(nèi)容到剪貼板

@media not screen and (color), print and (color) {}

求值順序如下：

CSS Code復(fù)制內(nèi)容到剪貼板

@media (not (screen and (color))), print and (color) {}

only：用于向早期瀏覽器隱藏媒體查詢，only必須位于media query的開頭

CSS Code復(fù)制內(nèi)容到剪貼板

@media (not (screen and (color))), print and (color) {}

無法識別媒體查詢的瀏覽器要求獲得逗號分割的媒體類型列表，規(guī)范要求：它們應(yīng)該在第一個(gè)不是連字符的非數(shù)字、字母之前截?cái)嗝總€(gè)值。所以上面的示例解釋為：

CSS Code復(fù)制內(nèi)容到剪貼板

@media only {}

因?yàn)闆]有only這樣的媒體類型，所以樣式表被忽略。如果不加only，下面的示例

CSS Code復(fù)制內(nèi)容到剪貼板

@media screen and (min-width: 400px) and (max-width: 600px) {}

被解析為@media screen {}這樣一來即使瀏覽器不知道m(xù)edia query的真正含義，樣式也會(huì)應(yīng)用于所有屏幕設(shè)備。不幸的是，IE6-8未能正確實(shí)現(xiàn)該規(guī)范。沒有將樣式應(yīng)用到所有屏幕的設(shè)備，它將整個(gè)樣式表忽略掉。

盡管存在此行為，如果希望向其他不太常用的瀏覽器隱藏樣式，任然建議在媒體查詢前面添加only。
媒體類型（media type）

    all：適用與所有設(shè)備
    print：paged material and documents viewed on screen in print previe mode.
    screen: 彩色電腦顯示器
    speech：intended for speech synthesizers

注意：CSS2.1和CSS3 media query定義了tty, tv, projection, handheld, braille, embossed, aural這些media type，但是它們在media queries 4 中都廢棄了，所以不推薦使用了
媒體特性（media feature）

下面是一些media feature，不是全部

    width： viewport width
    height: viewport height
    aspect-ratio: viewport的寬高比如：16/9
    orientation: 寬度和高度的大小關(guān)系。。
    resolution: pixel density of the output device
    scan: scanning process of the output device
    grid: is the device a grid or bitmap
    color: number of bits per color component of the output device, or zero if the device isn't color
    color-index: number of entries in the output device's color lookup table, or zero if the device does not use such a table

media query常用方法
排他（exclusive）

為確保在某一個(gè)條件下只有一個(gè)樣式表生效，將查詢條件嚴(yán)格劃分，如下面：

CSS Code復(fù)制內(nèi)容到剪貼板

@media (max-width: 400px) {
html {
background: red;
}
}
@media (min-width: 401px) and (max-width: 800px) {
html {
background: green;
}
}
@media (min-width: 801px) {
html {
background: blue;
}
}

覆蓋（overriding）

可以對元素設(shè)置相同優(yōu)先級，使用樣式順序，通過覆蓋，避免排他

CSS Code復(fù)制內(nèi)容到剪貼板

@media (min-width: 400px) {
html {
background: red;
}
}
@media (min-width: 600px) {
html {
background: green;
}
}
@media (min-width: 800px) {
html {
background: blue;
}
}

無線端優(yōu)先（Mobile first）

默認(rèn)樣式假設(shè)為移動(dòng)設(shè)備寬度，然后通過min-width控制擴(kuò)展樣式

CSS Code復(fù)制內(nèi)容到剪貼板

html {
background: red;
}
@media (min-width: 600px) {
html {
background: green;
}
}

PC優(yōu)先（desktop first）

默認(rèn)以寬屏進(jìn)行樣式設(shè)置，通過max-width控制樣式覆蓋

CSS Code復(fù)制內(nèi)容到剪貼板

html {
background: red;
}
@media (max-width: 600px) {
html {
background: green;
}
}

Tag：CSS3 Media Query

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3的media query學(xué)習(xí)攻略

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容