詳解css媒體查詢
簡介
媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮後變得更加強大bootstrap的響應式特性就是從此而來的.
簡單的來講媒體查詢是一種用於修飾css何時起作用的語法.
Media Queries 的引入，其作用就是允許添加表達式用以確定媒體的環境情況，以此來應用不同的樣式表。換句話說，其允許我們在不改變內容的情況下，改變頁面的布局以精確適應不同的設備。(1)
既然媒體查詢是用於控制樣式的,而樣式的使用無外乎如下幾種規則:
- 使用
link引入 - 使用
style標簽 - 使用
style屬性 - 使用
@import引入
而顯式的使用媒體查詢聲明樣式我們有如下三種方法:
- 使用
link引入時使用media屬性 - 使用
style標簽時添加media屬性 - 在樣式中使用條件規則組
我們先來看看link的使用方式:
link標簽使用媒體查詢後基本的樣子如下(1):
<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">一旦使用了媒體查詢修飾link標簽後,就意味著符合媒體查詢後這個樣式就會被啟用,同樣的規則適用於style標簽.
例子的解釋
那麽對於上面的那一句media="screen and (min-width: 400px)"就可以解釋為:
當屏幕的寬度大於等於400px的時候應用這條樣式規則.
媒體查詢的三個部分
上面的例子中我們可以看到多出了一個media屬性,而media中內容就是媒體查詢的語法,可以被如下解釋:
一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表範圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，允許內容的呈現針對一個特定範圍的輸出設備而進行裁剪，而不必改變內容本身。(2)
看起來很復雜,但是實際上一個媒體查詢的聲明就分為以下三個部分:
- 媒體類型 - 形容設備
- 媒體特性(媒體特征/媒體功能) - 形容設備的狀態
- 邏輯操作符 - 連接多個規則
那麽使用上方的例子來說media="screen and (min-width: 400px)"中screen就是媒體類型,
而後面的and被稱作邏輯操作符,(min-width: 400px)則被稱作媒體特性.
媒體類型一覽
上文說道媒體查詢在css2中就已經有了,所以有很多媒體類型是在css2時代提出的,其中就只有screen和all被廣泛的使用,有很多都被刪除掉了.
-
常使用的媒體類型css2制定
- screen 主要適用於彩色的電腦屏幕
- all 適用於所有設備 (媒體類型默認值)
-
不常使用的媒體類型
- speech
-
css2.1被廢棄掉的媒體類型(3)
- tty
- tv
- projection
- handheld
- braille
- embossed
- aura
常用的媒體特性
| 名稱 | 特性 |
|---|---|
| width | 可視寬度 |
| height | 可視高度 |
媒體特性完整列表
媒體特性一覽:
https://developer.mozilla.org...
媒體查詢聲明的詳細規則
大家可以運行一下這個例子來感受一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
html,body{
height: 100%;
}
body{
background-color: aqua;
}
</style>
<style media="screen and (min-width: 400px)">
body{
background-color: #000;
}
</style>
<title>test</title>
</head>
<body>
</body>
</html>在這個例子中屏幕寬度大於400像素的時候body的背景顏色是黑色,但是一旦低於400像素後就成為了青綠色.
一個媒體查詢聲明中可以由多個媒體查詢組成(使用逗號分割),一個單獨的規則是由如下的格式組成的:
| 類型 | 數量 | 默認值 |
|---|---|---|
| 媒體類型 | 0 / 1 | all |
| 媒體特性 | n(n!=0) | |
| 邏輯操作符 | n-1 |
也就是說一個媒體查詢中可以存在多條規則,對於一個規則需要一個媒體類型(默認all)和n個媒體特性(可選),他們之間的連接使用邏輯操作符來連接.
當不填寫媒體類型對應的默認規則:
- (max-width:400px) = all and (max-width:400px)
- (max-width:400px) and (min-width:200px) = all and (max-width:400px) and (min-width:200px)
- (max-width:400px) , (min-width:200px) = all and (max-width:400px) , all and (min-width:200px)
媒體特性前綴
上面的例子的媒體查詢有如下內容screen and (width: 400px)如果你看過媒體特性一覽表就會發現min-這個內容是沒有提到的.
大部分媒體特性都是有前綴的,媒體特性前綴主要用於約束媒體特性的作用範圍.
- max-xxx 小於指定的最大值返回true
- min-xxx 大於指定的最小值返回true
邏輯操作符
所謂的邏輯操作符說白了就是編程中的邏輯操作符,用於連接多個媒體特性表達式.
顯示的邏輯操作符一共有兩個:
- not 對於匹配到的媒體查詢取反
- and 只有連接的兩個規則都成立的時候才返回true
註意:默認使用逗號分割的多個媒體查詢就是or的寫法,也就是說逗號就相當於or操作符
特殊的有一個:
- only 不支持更加高級的媒體類型的瀏覽器檢測到only修飾的時候就會拋棄這個規則
實際使用中然並卵的功能
具體例子及解釋
例子1:
screen and (min-width: 400px)寬度大於400像素的設備使用這個樣式.
例子2:
(min-width: 700px) and (orientation: landscape)寬度大於700像素且屏幕為橫屏的時候使用這個樣式.
例子3:
handheld and (max-width:20em), screen and (max-width:30em)表示此CSS被應用於寬度小於20em的手持，或者寬度小於30em的屏幕.
條件規則組
所謂的條件規則組就是值媒體的聲明不在link標簽和style標簽上,而是在css代碼中,利用條件規則組我們可以將一塊css代碼在符合媒體查詢的時候應用.
使用方式(BootStrap中的樣式代碼)
@media (min-width:768px) {
.lead {
font-size: 21px
}
}優先級
在這個例子中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css" media="screen and (min-width: 400px)">
html,body{
height: 100%;
}
body{
background-color: aqua;
}
@media screen and (min-width: 400px){
body{
background-color: #000;
}
}
</style>
<title>test</title>
</head>
<body>
</body>
</html>在style標簽上聲明的屬性和在內部的條件規則組媒體查詢設計的一致,但是內部的條件規則組覆蓋掉了外部style上的媒體查詢.
可以看到他們實際上它們之間沒有優先級,只有先後執行的順序,後執行的規則會覆蓋掉前面的規則.
引用&參考
(1)
http://www.swordair.com/blog/...
(2)
https://developer.mozilla.org...
(3)
https://developer.mozilla.org...https://developer.mozilla.org...
https://www.zhangxinxu.com/wo...
額外補充
更多的詳細的例子:
http://www.cnblogs.com/lguow/...
使用媒體查詢註意的常見錯誤:
https://blog.csdn.net/qq_3755...
電腦分辨率對應的媒體查詢:
https://blog.csdn.net/happyde...
暗坑
在寫例子的時候我使用到了兩個瀏覽器最新的firefox和最新的chrome,有趣的事情是二者在style標簽上使用media屬性表現不同.
firefox中不寫<meta name="viewport" content="width=device-width, initial-scale=1" />也是正常運行,但是chrome就不可以.
原文地址：https://segmentfault.com/a/1190000016895772
詳解css媒體查詢