溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS3的mediaquery是怎樣的，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
一個媒體查詢（media query）包含一個媒體類型（media type）和至少一個表達式，用媒體特性限制樣式表的作用范圍。
語法
媒體查詢包含一個媒體類型(media type)以及一個到多個測試媒體特性(media feature)的表達式，表達式和媒體類型將根據實際情況計算的到true或者false。如果指定的媒體類型符合當前設備并且媒體特性表達式都為真，那當前媒體查詢為真。
當一個media query為true時，對應的樣式表按照正常樣式規則生效。指定了media query的<link>中的樣式始終會下載。
除非使用了not或者only操作符，media type是可選的，默認值為all。
邏輯運算符
and：用于結合多個媒體特性(media feature)到一個media query
只有所有feature表達式為真且滿足媒體類型時整個media query才為真。
以下是一個簡單media query，用于檢測media type為all時的一個media feature：
CSS
@media (min-width: 700px) {}
當我們需要添加限制條件是，可以使用and完成目的如下：
CSS
@media (min-width: 700px) and (orientation: landscape) {}
上面的media query只有在viewport大于700px并且width &bt; height時生效。此時如果需要限制媒體類型為彩色電腦顯示器，可以使用and添加media type如下：
CSS
@media screen and (min-width: 700px) and (orientation: landscape) {}
,逗號運算符：用于結合多個media query，任一media query為true時應用樣式。
逗號運算符相當于邏輯運算符中的or。逗號分隔的每一個media query都需要進行單獨求值，使用在某一個media query上的其他運算符不會影響到其他media query。
如果需要在大于700px寬的所有設備或者寬度大于高度的彩色電腦屏幕上應用樣式，可以使用如下規則：
CSS
@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
@media not all and (monochrome) {}
等價于下面的query：
CSS
@media not (all and (monochrome)) {}
例2：下面的多個media query求值
CSS
@media not screen and (color), print and (color) {}
求值順序如下：
CSS
@media (not (screen and (color))), print and (color) {}
only：用于向早期瀏覽器隱藏媒體查詢，only必須位于media query的開頭
CSS
@media (not (screen and (color))), print and (color) {}
無法識別媒體查詢的瀏覽器要求獲得逗號分割的媒體類型列表，規范要求：它們應該在第一個不是連字符的非數字、字母之前截斷每個值。所以上面的示例解釋為：
CSS Code復制內容到剪貼板
@media only {}
因為沒有only這樣的媒體類型，所以樣式表被忽略。如果不加only，下面的示例
CSS
@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
@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
@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
html {
background: red;
}
@media (min-width: 600px) {
html {
background: green;
}
}
PC優先（desktop first）
默認以寬屏進行樣式設置，通過max-width控制樣式覆蓋
CSS
html {
background: red;
}
@media (max-width: 600px) {
html {
background: green;
}
}
看完上述內容，你們掌握CSS3的mediaquery是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
