CSS Media媒體查詢使用大全，完整媒體查詢總結

前面的話

　　一說到響應式設計，肯定離不開媒體查詢media。一般認為媒體查詢是CSS3的新增內容，實際上CSS2已經存在了，CSS3新增了媒體屬性和使用場景(IE8-瀏覽器不支持)。本文將詳細介紹媒體查詢的內容

媒介類型

　　在CSS2中，媒體查詢只使用於<style>和<link>標簽中，以media屬性存在

　　media屬性用於為不同的媒介類型規定不同的樣式

screen         計算機屏幕（默認值）    
tty            電傳打字機以及使用等寬字符網格的類似媒介
tv             電視類型設備（低分辨率、有限的屏幕翻滾能力）
projection     放映機
handheld       手持設備（小屏幕、有限的帶寬）
print          打印預覽模式 / 打印頁
braille        盲人用點字法反饋設備
aural          語音合成器
all            適合所有設備

　　真正廣泛使用且所有瀏覽器都兼容的媒介類型是'screen'和'all'

<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}   
</style>
<div class="box"></div>

  媒體屬性

　　媒體屬性是CSS3新增的內容，多數媒體屬性帶有“min-”和“max-”前綴，用於表達“小於等於”和“大於等於”。這避免了使用與HTML和XML沖突的“<”和“>”字符

　　[注意]媒體屬性必須用括號()包起來，否則無效

　　下表中列出了所有的媒體屬性

     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）

　　指定輸出設備每個像素單元的比特值。如果設備不支持輸出顏色，則該值為0

　　向所有能顯示顏色的設備應用樣式表

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

媒體查詢多用於響應式網頁中。

1.初始化設置：

在HTML文件中，網頁頂部<head></head>標簽中插入一句話：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 

這句話在於對響應式網頁做一個初始化設置，主要包括：

name="viewport"：標記顯示設備為視口；

width = device-width：寬度等於當前設備的寬度；

initial-scale：初始的縮放比例（默認設置為1.0）；
minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）；
maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）；   
user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）。

 

2.解決IE瀏覽器的兼容性問題：

因為IE瀏覽器(IE8)不支持HTML5和CSS3中的media，所以要加載用於解決IE瀏覽器兼容性問題的JS文件：

 

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

 

兩個<script></script>標簽中的src屬性所指向的文件鏈接地址為固定地址中的文件，直接異地引用就好，不用下載到本地引用。

3.設置IE的渲染方式為最高：

現在有很多人的IE瀏覽器都升級到IE9以上，這個時候會有很多詭異的事情發生，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8，為了防止這種情況，我們需要下面這段代碼來讓IE的文檔模式永遠都是最新：

 

<meta http-equiv="X-UA-Compatible"content="IE=edge">

 

當然還有一個更給力的寫法：

 

<meta http-equiv="X-UA-Compatible"content="IE=Edge，chrome=1">

 

這段代碼后面加了一個chrome=1，這是由於Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），如果用戶電腦安裝這個chrome插件，就可讓電腦內的IE瀏覽器規避版本因素，使用Webkit引擎及V8引擎進行排版及運算。當然如果用戶沒裝這個插件，這段代碼就會讓IE瀏覽器以最高的文檔模式展現效果。

4.CSS3 media 媒體查詢的寫法：

 

@media screen and (max-width: 960px){

body{

background:#000;

}

}

 

這是一個media的標准寫法，在CSS文件中，意為：當頁面小於960px時執行以下CSS代碼，具體內容暫不用管。

對於上述代碼中的screen，意為在告知設備在打印頁面時使用襯線字體，在屏幕上顯示時用無襯線字體。目前很多網站都會直接省略screen,從而不需要考慮用戶打印網頁的需求，所以又有這種寫法：

 

@media (max-width: 960px){

body{

background:#000;

}

}

 

本着思維嚴謹的原則，個人不會采用這種寫法。

5.CSS3媒體查詢主體代碼組合：

 

在響應式網頁布局中需要持續運用媒體查詢代碼組合，主要作用在於判斷所適配屏幕的寬度，並根據各種寬度條件套用不同的CSS樣式。

如當屏幕寬度等於960px時，將網頁背景色變為紅色：

 

@media screen and (max-device-width:960px){

body{

background:red;

}

} 

如當屏幕寬度最大為960px（小於960px）時，將網頁背景色變為黑色：

@media screen and (max-width: 960px){

     body{

        background:#000;

    }

}    

如當屏幕寬度最小為960px（大於960px）時，將網頁背景色變為桔色：

@media screen and (min-width:960px){

    body{

        background:orange;

    }

}    

更為常見的是混合使用，如當屏幕寬度介於960px和1200px之間時，將網頁背景色變為黃色：

@media screen and (min-width:960px) and(max-width:1200px){
　　body{

　　　　background:yellow;

　　}
}

6.總體開發思路：

 

使用CSS3中媒體查詢的大致思路就是判斷網頁在不同設備中所處的寬度范圍，這樣的范圍可能有三種（PC、平板、手機），也可能有四種（PC、平板、中大屏手機、小屏手機），當然也可能只需要兩種（平板、手機，PC端單獨開發一版時可不作為CSS3媒體查詢的使用對象），並為各種寬度范圍情況下的所需頁面元素套用不同的CSS樣式，從而適配各種設備。

7.響應式網頁開發中的寬度問題：

在實際開發中，通常需要設置響應式網頁寬度的最大值，一旦忽略最大寬度，臃腫或零散的網頁布局都會造成視覺洪災，也就是我們常說的看起來很low。
另外談談目前顯示設備中的網頁寬度問題（由於篇幅問題，就不從工業革命開始扯了），目前最為常見的寬度基本上都是：大於或等於960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之間的平板端（768px、640px）以及640px以下的手機端（480px、320px），以上寬度存在已久，且顯示設備中的網頁寬度會長期處於這樣的狀態下，在響應式網頁寬度設計上，基本從這幾個尺寸考慮就已經足夠。
8.media媒體查詢所有參數匯總：

媒體查詢器中還包含並不常用的相關功能，悉如示下：

 

• width:瀏覽器可視寬度，

• height:瀏覽器可視高度，

• device-width:設備屏幕的寬度，

• device-height:設備屏幕的高度，

• orientation:檢測設備目前處於橫向還是縱向狀態，

• aspect-ratio:檢測瀏覽器可視寬度和高度的比例(例如：aspect-ratio:16/9)，

• device-aspect-ratio:檢測設備的寬度和高度的比例，

• color:檢測顏色的位數（例如：min-color:32就會檢測設備是否擁有32位顏色），

• color-index:檢查設備顏色索引表中的顏色（他的值不能是負數），

• monochrome:檢測單色楨緩沖區域中的每個像素的位數（這個太高級，估計咱很少會用的到），

• resolution:檢測屏幕或打印機的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

• grid：檢測輸出的設備是網格的還是位圖設備。

9.擴展——在CSS2中同樣有媒體查詢：

 

 

media媒體查詢並不是CSS3誕生之后的專用功能，早在CSS2開始就已經支持media，比如：

在HTML文件中的<head></head>標簽中寫入這句：

 

<link rel="stylesheet"type="text/css" media="screen"href="style.css">

以上是CSS2實現的襯線用法，href屬性中寫入在某單一顯示設備中鏈接的CSS文件，但僅供入門，

如要判斷移動設備是否為縱向放置的顯示屏，可以這樣寫：

 

<link rel="stylesheet" type="text/css"media="screen and (orientation:portrait)"href="style.css">

如要讓小於960px的頁面執行指定的CSS樣式文件，可以這樣寫：

 

<link rel="stylesheet"type="text/css" media="screen and (max-width:960px)"href="style.css">

當然，CSS2中的媒體查詢方法放到現在並不推薦使用，最大的弊端在於這樣會增加頁面http的請求次數，增加頁面負擔，使用CSS3中的媒體查詢才是目前的最佳方法。