css - @media 查詢

隨著市面上各種型號的終端產生，做適配類的網站也成了越來越多頁面的製作趨勢，實現多終端適配時，中必不可少的屬性就是css3的@media screen屬性，他可以根據瀏覽器寬度判斷並輸出不同的長寬值。

@media是什麼？如何使用？

先來了解一下官方對@media的定義吧：

@media查詢，你可以針對不同的媒體型別定義不同的樣式，並根據不同的媒體型別查詢出所對應的應用樣式。

@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。

當重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

注：媒體查詢後即使查詢返回false，附有媒體查詢的樣式表仍然會下載到[<link>]標籤。但是，直到其查詢結果變為真，否則其內容將不適用。

@media在 css3 中 語法（日常推薦寫法）：

/* @media在css3中的 語法，css中使用@media屬性直接判斷媒體型別時 須以@media開頭*/
@media mediatype and|not|only (media feature) {
    /* CSS-Code; */
}
/* 或者通過 @import將單獨的列印樣式引入到css中 */
@import url(xxx.css) mediatype;	
複製程式碼

@media在 css3 中 舉例：

/* 當文件寬度小於 300 畫素時，修改背景顏色 background-color 為 blue */
@media screen and (max-width: 300px) {
    body { background-color: blue; }
}
/* 當媒體型別為all時，表示所有裝置都引入 body { background-color: blue; }*/
@media all {
    body { background-color: blue; }
}
/* 當媒體型別為print時，引入print.css */
@import url(print.css) print;	

/* 要注意的是：使用link標籤要比使用@import規則效能更好。 */
複製程式碼

@media在 css2 中語法：

<!-- @media在css2中使用時，需要通過html的<link>裡的medea屬性來判斷媒體型別 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

<!--或-->
<!--提示：如需在一個 style 元素中定義一個以上的媒介型別，請使用逗號分隔的列表（如：media="screen,projection"）。-->
<style type="text/css" media="screen,projection">
    ...
</style>
複製程式碼

@media在 css2 中舉例：

<!-- 當文件寬度小於 300 畫素時，引入樣式mystylesheet.css，此種寫法為css2的寫法 -->
<link rel="stylesheet" media="screen and (max-width: 300px)" href="mystylesheet.css">

<!--當媒體型別為screen或projection時，使用該style裡的樣式-->
<style type="text/css" media="screen,projection">
    ...
</style>
複製程式碼

日常我們使用@media時，推薦css3寫法，如遇相容問題，可通過引入外部檔案的方式進行處理（請見下文中介紹的：@media相容性的考慮）。

媒體型別（Media Type）

媒體型別就是 描述裝置的一般類別，即通過媒體型別指定不同的樣式。

除非您使用not或only邏輯運算子，否則媒體型別是可選的，並且將隱含使用all型別。

css3廢棄了很多媒體型別，所有主流瀏覽器都支援 media 屬性的"screen"、"print"以及 "all" 值。

• all：適用於所有裝置。 （在 媒體查詢 中如果沒有明確指定Media Type，那麼其預設為all）

  @media all { ... }	/* @media all的使用方法 */
  複製程式碼

• print：用於印表機和列印預覽，設定印表機用字型尺寸等。

  _{顯示器(screen)和印表機(printer)是兩種差別很大的裝置，所以從瀏覽器裡看到的頁面，列印出來也許和你看到的樣子有很大的差距。}

  _{screen一般使用邏輯單位比如px，而印表機則應該使用物理單位比如cm或in。}

• screen：用於電腦螢幕，平板電腦，智慧手機等

• speech：應用於螢幕閱讀器等發聲裝置

@media 的常用例項

1. max-with （最大寬度值，即 <=）

   /* 媒體型別小於或等於480px時 */
   @media screen and (max-width:480px){ ... }
   複製程式碼

2. min-with （最小寬度值，即 >=）

   /* 媒體型別大於或等於960px時 */
   @media screen and (min-width:960px){ ... }
   複製程式碼

3. all （適用於所有）

   /* 在所有媒體型別下，瀏覽器寬度小於等於500px的時，使用{}裡的樣式 */
   @media all and (max-width: 500px) { ... } 
   複製程式碼

4. and （"and"關鍵詞 將多個媒體特性結合在一起）

   /* 媒體型別在480px~960px之間時，使用{}裡的樣式 */
   @media screen and (min-width:480px) and (max-width:960px){ ... }
   
   複製程式碼

5. Device Width （裝置螢幕的輸出寬度，“max-device-width” “min-device-width” 指的是裝置的實際解析度，即可視面積解析度。）

6. <!--iphone.css適用於最大裝置寬度為480px的裝置中-->
   <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
   
   複製程式碼

7. not（“not”關鍵詞 用來排除某種制定的媒體型別）

   /* 在 除列印裝置 以及 裝置寬度小於1200px下所有裝置中，使用{}裡的樣式 */
   @media not print and (max-width: 1200px){ ... }
   
   複製程式碼

8. only （only用來指定某種特定的媒體型別，排除不支援媒體查詢的瀏覽器）（媒體型別：Media Type）

   其實only很多時候是用來對那些不支援 媒體查詢 但卻支援Media Type的裝置隱藏樣式表的。

   • 支援 媒體特性 的裝置，正常呼叫樣式，此時就當only不存在；
   • 不支援 媒體特性 但又 支援 Media Type 的裝置，這樣就會不讀樣式，因為其先會讀取only而不是screen；
   • 不支援* 媒體查詢 的瀏覽器，不論是否支援only，樣式都不會被採用。

   /*用法*/
   @media only screen and (min-width:480px) and (max-width:960px){ ... }
   
   複製程式碼

9. screen （與列印樣式有關）

   上面的程式碼幾次用到了screen ，他的意思是在告知裝置在列印頁面時使用襯線字型，在螢幕上顯示時用無襯線字型。

   當你的網站不需要考慮使用者列印的樣式問題時，可以省略screen。

@media相容性的考慮

pc端相容：

移動端相容：

1、移動裝置的相容考慮（<meta>）

有了CSS的媒體查詢這個功能，便有了所謂的響應式（例如bootstrap的響應式佈局），那麼設定也就成了必不可少的一部分。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,shrink-to-fit=no">
複製程式碼

content屬性值如下，這些屬性值主要用來處理可視區域。

值	描述
width	設定layout viewport 的寬度，為一個正整數，或字串”device-width”（寬度等於當前裝置的寬度）
initial-scale	設定頁面的初始縮放值，為一個數字，可以帶小數（預設設定為1.0）
minimum-scale	允許使用者的最小縮放值，為一個數字，可以帶小數（預設設定為1.0）
maximum-scale	允許使用者的最大縮放值，為一個數字，可以帶小數（預設設定為1.0）
height	設定layout viewport 的高度，這個屬性很少使用
user-scalable	是否允許使用者手動縮放，值為”no”或”yes”，no 代表不允許，yes代表允許（預設設定為no）
shrink-to-fit	網頁寬度自適應時，ios9的相容解決辦法

下面一行程式碼可以讓網頁的寬度自動適應手機螢幕的寬度

<meta name="viewport" content="width=device-width,initial-scale=1">
複製程式碼

但在IOS9中要想起作用，得加上"shrink-to-fit=no"，原因如下：

Viewport meta tags using "width=device-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag as shown below.The added value will prevent the page from scaling to fit the viewport
複製程式碼

2、低版本瀏覽器的相容考慮

<!--
html5shiv.js：解決ie9以下瀏覽器對html5新增標籤的不識別，並導致CSS不起作用的問題。
respond.min.js：讓不支援css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支援查詢。
搜尋網址：https://www.bootcdn.cn/
-->
<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->

複製程式碼

3、設定IE渲染方式預設為最高(這部分可以選擇新增也可以不新增)

IE 處處是陷阱，雖然大多人的IE瀏覽器版本都升級到了IE9以上，可IE9也並不十分友好，有可能它的文件模式卻是IE8，為了防止這種情況，我們需要下面這段程式碼來讓IE的文件模式永遠都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
複製程式碼

chrome=1，這個Google Chrome Frame（谷歌內嵌瀏覽器框架GCF）。

如果有的使用者電腦裡面裝了這個chrome的外掛，就可以讓電腦裡面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算。

如果使用者沒裝這個外掛，那這段程式碼就會讓IE以最高的文件模式展現效果。

也就是說：當瀏覽器為雙核時，預設使用chrome核心。

常用的幾種螢幕寬度設定

/* 豎屏 */
@media screen and (orientation: portrait) and (max-width: 720px) { ... }

/* 橫屏 */
@media screen and (orientation: landscape) { ... }

複製程式碼

@media使用要點

1. 使用min-width時，小的放上面，大的在下面，否則會出現樣式覆蓋的現象。
2. 使用max-width時，大的在上面，小的在下面，否則會出現樣式覆蓋的現象。

附：媒體功能

值	描述
aspect-ratio	定義輸出裝置中的頁面可見區域寬度與高度的比率
color	定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0
color-index	定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
device-aspect-ratio	定義輸出裝置的螢幕可見寬度與高度的比率。
device-height	定義輸出裝置的螢幕可見高度。
device-width	定義輸出裝置的螢幕可見寬度。
grid	用來查詢輸出裝置是否使用柵格或點陣。
height	定義輸出裝置中的頁面可見區域高度。
max-aspect-ratio	定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-color	定義輸出裝置每一組彩色原件的最大個數。
max-color-index	定義在輸出裝置的彩色查詢表中的最大條目數。
max-device-aspect-ratio	定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-device-height	定義輸出裝置的螢幕可見的最大高度。
max-device-width	定義輸出裝置的螢幕最大可見寬度。
max-height	定義輸出裝置中的頁面最大可見區域高度。
max-monochrome	定義在一個單色框架緩衝區中每畫素包含的最大單色原件個數。
max-resolution	定義裝置的最大解析度。
max-width	定義輸出裝置中的頁面最大可見區域寬度。
min-aspect-ratio	定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
min-color	定義輸出裝置每一組彩色原件的最小個數。
min-color-index	定義在輸出裝置的彩色查詢表中的最小條目數。
min-device-aspect-ratio	定義輸出裝置的螢幕可見寬度與高度的最小比率。
min-device-width	定義輸出裝置的螢幕最小可見寬度。
min-device-height	定義輸出裝置的螢幕的最小可見高度。
min-height	定義輸出裝置中的頁面最小可見區域高度。
min-monochrome	定義在一個單色框架緩衝區中每畫素包含的最小單色原件個數
min-resolution	定義裝置的最小解析度。
min-width	定義輸出裝置中的頁面最小可見區域寬度。
monochrome	定義在一個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0
orientation	定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
resolution	定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
scan	定義電視類裝置的掃描工序。
width	定義輸出裝置中的頁面可見區域寬度。

參考

@media 媒體型別 print 的使用

CSS3 @media 查詢

---

如若發現文中紕漏請留言，歡迎大家糾錯，我們一起成長。