萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> divcssmediaquery學習方法是什麼

divcssmediaquery學習方法是什麼

大家知道divcssmediaquery學習方法嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗,在此拿出來與大家分享下,請大家互相指正。一個媒體查詢(media query)包含一個媒體類型(media type)和至少一個表達式,用媒體特性限制樣式表的作用范圍。

語法

媒體查詢包含一個媒體類型(media type)以及一個到多個測試媒體特性(media feature)的表達式,表達式和媒體類型將根據實際情況計算的到true或者false。如果指定的媒體類型符合當前設備並且媒體特性表達式都為真,那當前媒體查詢為真。

當一個media query為true時,對應的樣式表按照正常樣式規則生效。指定了media query的中的樣式始終會下載。

除非使用了not或者only操作符,media type是可選的,默認值為all。

邏輯運算符

and:用於結合多個媒體特性(media feature)到一個media query

只有所有feature表達式為真且滿足媒體類型時整個media query才為真。

以下是一個簡單media query,用於檢測media type為all時的一個media feature:

CSS Code復制內容到剪貼板

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

當我們需要添加限制條件是,可以使用and完成目的如下:

CSS Code復制內容到剪貼板

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

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

CSS Code復制內容到剪貼板

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

,逗號運算符:用於結合多個media query,任一media query為true時應用樣式。

逗號運算符相當於邏輯運算符中的or。逗號分隔的每一個media query都需要進行單獨求值,使用在某一個media query上的其他運算符不會影響到其他media query。

如果需要在大於700px寬的所有設備或者寬度大於高度的彩色電腦屏幕上應用樣式,可以使用如下規則:

CSS Code復制內容到剪貼板

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

not:用於對整個media query結果取反,必須位於一個media query的開頭

在逗號分隔的多個media query中,not只對它作用的media query生效。not不能對單個media feature取反,只能作用於整個media query

例1:如下面的not將在最後求值:

CSS Code復制內容到剪貼板

@media not all and (monochrome) {}

等價於下面的query:

CSS Code復制內容到剪貼板

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

例2:下面的多個media query求值

CSS Code復制內容到剪貼板

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

求值順序如下:

CSS Code復制內容到剪貼板

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

only:用於向早期浏覽器隱藏媒體查詢,only必須位於media query的開頭

CSS Code復制內容到剪貼板

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

無法識別媒體查詢的浏覽器要求獲得逗號分割的媒體類型列表,規范要求:它們應該在第一個不是連字符的非數字、字母之前截斷每個值。所以上面的示例解釋為:

CSS Code復制內容到剪貼板

@media only {}

因為沒有only這樣的媒體類型,所以樣式表被忽略。如果不加only,下面的示例

CSS Code復制內容到剪貼板

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

被解析為@media screen {}這樣一來即使浏覽器不知道media query的真正含義,樣式也會應用於所有屏幕設備。不幸的是,IE6-8未能正確實現該規范。沒有將樣式應用到所有屏幕的設備,它將整個樣式表忽略掉。

盡管存在此行為,如果希望向其他不太常用的浏覽器隱藏樣式,任然建議在媒體查詢前面添加only。

媒體類型(media type)

all:適用與所有設備

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: 寬度和高度的大小關系。。

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)

為確保在某一個條件下只有一個樣式表生效,將查詢條件嚴格劃分,如下面:

CSS Code復制內容到剪貼板

@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)

可以對元素設置相同優先級,使用樣式順序,通過覆蓋,避免排他

CSS Code復制內容到剪貼板

@media (min-width: 400px) {

html {

background: red;

}

}

@media (min-width: 600px) {

html {

background: green;

}

}

@media (min-width: 800px) {

html {

background: blue;

}

}

無線端優先(Mobile first)

默認樣式假設為移動設備寬度,然後通過min-width控制擴展樣式

CSS Code復制內容到剪貼板

html {

background: red;

}

@media (min-width: 600px) {

html {

background: green;

}

}

PC優先(desktop first)

默認以寬屏進行樣式設置,通過max-width控制樣式覆蓋

CSS Code復制內容到剪貼板

html {

background: red;

}

@media (max-width: 600px) {

html {

background: green;

}

}

相信大家已經學會divcssmediaquery學習方法了吧!感謝大家對我們網站的支持!

相關推薦:

css實現圓角圖形繪制的方法 

copyright © 萬盛學電腦網 all rights reserved