一說到響應式設計,確定離不開媒體查詢media。通常認爲媒體查詢是CSS3的新增內容,實際上CSS2已經存在了,CSS3新增了媒體屬性和使用場景(IE8-瀏覽器不支持)。本文將詳細介紹媒體查詢的內容javascript
在CSS2中,媒體查詢只使用於<style>和<link>標籤中,以media屬性存在css
media屬性用於爲不一樣的媒介類型規定不一樣的樣式html
screen 計算機屏幕(默認值)
tty 電傳打字機以及使用等寬字符網格的相似媒介
tv 電視類型設備(低分辨率、有限的屏幕翻滾能力)
projection 放映機
handheld 手持設備(小屏幕、有限的帶寬)
print 打印預覽模式 / 打印頁
braille 盲人用點字法反饋設備
aural 語音合成器
all 適合全部設備
真正普遍使用且全部瀏覽器都兼容的媒介類型是'screen'和'all'java
<style media="screen"> .box{height: 100px;width: 100px; background-color: lightblue;} </style> <div class="box"></div>
媒體屬性是CSS3新增的內容,多數媒體屬性帶有「min-」和「max-」前綴,用於表達「小於等於」和「大於等於」。這避免了使用與HTML和XML衝突的「<」和「>」字符git
[注意]媒體屬性必須用括號()包起來,不然無效github
下表中列出了全部的媒體屬性chrome
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid
【1】顏色(color)windows
指定輸出設備每一個像素單元的比特值。若是設備不支持輸出顏色,則該值爲0瀏覽器
向全部能顯示顏色的設備應用樣式表ide
<style> @media (color){ .box{height: 100px;width: 100px;background-color: lightblue;} } </style> <div class="box"></div>
【2】顏色索引(color-index)
顏色索引指定了輸出設備中顏色查詢表中的條目數量,若是沒有使用顏色查詢表,則值等於0
向全部使用至少256個索引顏色的設備應用樣式表(下列代碼無顯示,說明返回值爲0)
<style> @media (min-color-index: 256){ .box{height: 100px; width: 100px;background-color: lightgreen;} } </style> <div class="box"></div>
【3】寬高比(aspect-ratio)
寬高比描述了輸出設備目標顯示區域的寬高比。該值包含兩個以「/」分隔的正整數。表明了水平像素數(第一個值)與垂直像素數(第二個值)的比例
向可視區域是正方形或者是寬屏的設備應用樣式表
<style> @media (min-aspect-ratio: 1/1) { .box{height: 100px;width: 100px; background-color: lightgreen; } } </style> <div class="box"></div>
【4】設備寬高比(device-aspect-ratio)
設備寬高比描述了輸出設備的寬高比。該值包含兩個以「/」分隔的正整數。表明了水平像素數(第一個值)與垂直像素數(第二個值)的比例
向寬高比爲16:9的特殊寬屏設備應用樣式表
<style> @media (device-aspect-ratio:16/9) { .box{ height: 100px;width: 100px; background-color: pink;} } </style> <div class="box"></div>
【5】設備高度(device-height)
設備高度描述了輸出設備的高度
向顯示在最小高度1000px的屏幕上的文檔應用樣式表
<style> @media (min-device-height: 1000px) { .box{ height: 100px;width: 100px; background-color: pink;} } </style> <div class="box"></div>
【6】設備寬度(device-width)
設備寬度描述了輸出設備的寬度
向顯示在最小寬度1000px的屏幕上的文檔應用樣式表
<style> @media (min-device-width: 1000px) { .box{ height: 100px; width: 100px;background-color: lightblue; } } </style> <div class="box"></div>
【7】網格(grid)
網格判斷輸出設備是網格設備仍是位圖設備。若是設備是基於網格的(例如電傳打字機終端或只能顯示一種字形的電話),該值爲1,不然爲0
向非網格設備應用樣式表
<style> @media (grid:0) { .box{height: 100px;width: 100px; background-color: lightgreen;} } </style> <div class="box"></div>
【8】高度(height)
高度描述了輸出設備渲染區域(如可視區域的高度或打印機紙盒的高度)的高度
向高度大於800px的可視區域的設備應用樣式表
<style> @media (min-height:800px) { .box{ height: 100px; width: 100px;background-color: lightgreen; } } </style> <div class="box"></div>
【9】寬度(width)
寬度描述了輸出設備渲染區域的寬度
向寬度大於800px的可視區域的設備應用樣式表
<style> @media (min-width:800px) { .box{ height: 100px;width: 100px; background-color: lightgreen;} } </style> <div class="box"></div>
【10】黑白(monochrome)
黑白指定了一個黑白(灰度)設備每一個像素的比特數。若是不是黑白設備,值爲0
向非黑白設備應用樣式表
<style> @media (monochrome:0) { .box{height: 100px; width: 100px; background-color: lightgreen;} } </style> <div class="box"></div>
【11】方向(orientation)
方向指定了設備處於橫屏(寬度大於寬度)模式仍是豎屏(高度大於寬度)模式
值:landscape(橫屏) | portrait(豎屏)
向豎屏設備應用樣式表
<style> @media (orientation: portrait) { .box{height: 100px;width: 100px;background-color: lightgreen; } } </style> <div class="box"></div>
【12】分辨率(resolution)
分辨率指定輸出設備的分辨率(像素密度)。分辨率能夠用每英寸(dpi)或每釐米(dpcm)的點數來表示
[注意]關於屏幕三要素(屏幕尺寸、分辨率、像素密度)的相關內容移步至此
向每英寸至少90點的設備應用樣式
<style> @media (min-resolution: 90dpi) { .box{height: 100px;width: 100px; background-color: lightgreen; } } </style> <div class="box"></div>
【13】掃描(scan)
掃描描述了電視輸出設備的掃描過程
值: progressive | interlace
媒體查詢包含了一個CSS2已有的媒介類型(或稱爲媒體類型)和CSS3新增的包含一個或多個表達式的媒體屬性,這些媒體屬性會被解析成真或假
當媒體查詢爲真時,相關的樣式表或樣式規則就會按照正常的級聯規則被應用。即便媒體查詢返回假, <link> 標籤上帶有媒體查詢的樣式表仍將被下載(只不過不會被應用)
<link rel="stylesheet" href="style.css" media="print"> <div class="box"></div>
media並非'print',因此媒體查詢爲假。可是,style.css文件依然被下載
操做符not、and、only和逗號(,)能夠用來構建複雜的媒體查詢
and
and操做符用來把多個媒體屬性組合起來,合併到同一條媒體查詢中。只有當每一個屬性都爲真時,這條查詢的結果才爲真
[注意]在不使用not或only操做符的狀況下,媒體類型是可選的,默認爲all
知足橫屏以及最小寬度爲700px的條件應用樣式表
@media all and (min-width: 700px) and (orientation: landscape) { ... }
因爲不使用not或only操做符的狀況下,媒體類型是可選的,默認爲 all,因此能夠簡寫爲
@media (min-width: 700px) and (orientation: landscape) { ... }
or
將多個媒體查詢以逗號分隔放在一塊兒;只要其中任何一個爲真,整個媒體語句就返回真,至關於or操做符
知足最小寬度爲700像素或是橫屏的手持設備應用樣式表
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not
not操做符用來對一條媒體查詢的結果進行取反
[注意]not關鍵字僅能應用於整個查詢,而不能單獨應用於一個獨立的查詢
@media not all and (monochrome) { ... }
//等價於
@media not (all and (monochrome)) { ... }
only
only操做符表示僅在媒體查詢匹配成功時應用指定樣式。能夠經過它讓選中的樣式在老式瀏覽器中不被應用
media="only screen and (max-width:1000px)"{...}
上面這行代碼,在老式瀏覽器中被解析爲media="only",由於沒有一個叫only的設備,因此實際上老式瀏覽器不會應用樣式
media="screen and (max-width:1000px)"{...}
上面這行代碼,在老式瀏覽器中被解析爲media="screen",它把後面的邏輯表達式忽略了。因此老式瀏覽器會應用樣式
因此,在使用媒體查詢時,only最好不要忽略
window.matchMedia()方法用來檢查CSS的mediaQuery語句
[注意]IE9-瀏覽器不支持,能夠使用第三方函數庫matchMedia.js
屬性
window.matchMedia()方法接受一個mediaQuery語句的字符串做爲參數,返回一個MediaQueryList對象。該對象有media和matches兩個屬性
media:返回所查詢的mediaQuery語句字符串
matches:返回一個布爾值,表示當前環境是否匹配查詢語句
var result = window.matchMedia('(min-width: 600px)'); console.log(result.media); //'(min-width: 600px)' console.log(result.matches); // true
能夠根據matchMedia()方法的matches屬性的不一樣結果,進行對應的設置
var result = window.matchMedia('(min-width: 600px)'); if (result.matches) { // }else{ // }
[注意]若是window.matchMedia沒法解析mediaQuery參數,matches屬性返回的老是false,而不是報錯
var result = window.matchMedia('123'); console.log(result.matches);//false
事件
window.matchMedia方法返回的MediaQueryList對象有兩個方法,用來監聽事件:addListener方法和removeListener方法
// 指定回調函數 mql.addListener(mqCallback); // 撤銷回調函數 mql.removeListener(mqCallback);
注意,只有mediaQuery查詢結果發生變化時,才調用指定的回調函數
因此,若是想要mediaQuery查詢未變化時,就顯示相應效果,須要提早調用一次函數
下面這個例子是當頁面寬度小於1000px時,頁面背景顏色爲品紅色;不然爲淡藍色
var mql = window.matchMedia("(min-width: 1000px)"); mqCallback(mql); mql.addListener(mqCallback); function mqCallback(mql) { if (mql.matches) { document.body.background = 'pink'; }else{ document.body.background = 'lightblue'; } }
媒體查詢的一個經常使用功能是打印樣式的設置,主要是背景清除、字體顏色變黑等
@media print{ *,*:before,*:after{ background:transparent!important; color:#000 !important; box-shadow: none !important; text-shadow: none !important; } a,a:visited{ text-decoration: underline; } a[href]:after{ content:"(" attr(href) ")"; } abbr[title]:after{ content:"(" attr(title) ")"; } a[href^="#"]:after,a[href^="javascript:;"]:after{ content:""; } pre,blockquote{ border: 1px solid #999; /*只有opera瀏覽器起做用,避免在元素內部插入分頁符*/ page-break-inside:avoid; } thead{ display:table-header-group; } tr,img{ page-break-inside:avoid; } img{ max-width:100%!important; } p,h2,h3{ /*元素內部發生分頁時,最少保留3行*/ orphans:3; /*元素內部發生分頁時,元素頂部最少保留3行*/ windows:3; } h2,h3{ /*避免在元素後面插入一個分頁符*/ page-break-after:avoid; } }
若是媒體查詢@media使用的是相對單位,如rem,這裏有一個坑須要着重強調一下
通常而言,rem是相對於HTML的字體大小的。可是,因爲媒體查詢的級別很是高,它並非HTML的子元素,不是相對於HTML,而是相對於瀏覽器的,而瀏覽器的默認字體大小是16px
若是HTML設置字體大小爲12px,設置以下媒體查詢
media="only screen and (max-width:1rem)"
實際上,max-width等於16px,而不是12px
而正是因爲媒體查詢是相對於瀏覽器的, 因此使用rem就沒有必要,徹底能夠使用em來替代
media="only screen and (max-width:1em)"