CSS @media 媒體查詢

由於媒體尺寸的多樣性，為了能夠使同一套程式碼適配多種尺寸媒體，於是產生了響應式佈局。

響應式佈局，就是頁面能夠根據當前媒體的不同應用不同的佈局方式，以此達到最佳效果。

佈局方式通常由CSS控制，媒體查詢可以判斷當前媒體型別，從而應用不同的CSS程式碼。

一.媒體查詢歷史：

很多朋友認為媒體查詢是CSS3新增，事實並非如此。

媒體查詢在CSS3之前早已存在，比較粗放一些，僅用來區分媒體的型別。

看如下簡單程式碼例項：

[HTML] 純文字檢視 複製程式碼
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上述程式碼分析如下：

（1）.link元素的media屬性用來規定上述CSS程式碼應用的媒體型別。

（2）.screen表示對應CSS檔案應用於顯示裝置。

（3）.all表示對應CSS檔案應用於所有媒體裝置.

（4）.print表示對應CSS檔案應用於印表機。

（5）.即便當前媒體不符合要求，也會下載對應的CSS檔案，只是不應用。

media屬性也可以用於<style>元素，規定當前css程式碼應用的媒體型別，本文就不再演示。

CSS3之後，媒體查詢功能得到了增強，不但可以查詢媒體型別，而且還可以查詢媒體的相關屬性。

比如可以根據當前瀏覽器視口的尺寸的大小，來應用不同的CSS程式碼或者CSS檔案。

二.媒體型別與媒體屬性：

上文已經介紹，CSS3媒體查詢只能區分媒體型別，CSS3得到了進一步加強，可以區分媒體的屬性。

下面羅列一下當前媒體查詢常見的媒體型別與媒體屬性：

1.媒體型別：

（1）.screen：顯示螢幕，比如電腦、手機或者pad螢幕。

（2）.tty：電傳打字機已經等寬字元網格類的裝置。

（3）.tv：電視等型別的裝置。

（4）.projection：投影儀等裝置。

（5）.handheld：一些手持裝置。

（6）.print：印表機。

（7）.braille：盲人專用的一些裝置。

（8）.aural：語音合成器。

（9）.all：表示適用於所有裝置。

2.媒體屬性：

媒體屬性是針對媒體型別的一種細化，比如同是screen顯示器裝置，但是規格會有所不同。

比如顯示區域的尺寸不同，再比如顯示器中瀏覽器視口可以調整到不同的尺寸。

主要媒體屬性列舉如下：

（1）.寬度屬性：width | min-width | max-width。

（2）.高度屬性：height | min-height | max-height。

（3）.裝置寬度：device-width | min-device-width | max-device-width。

（4）.裝置高度：device-height | min-device-height | max-device-height。

（5）.視口寬高比：aspect-ratio | min-aspect-ratio | max-aspect-ratio。

（6）.裝置寬高比：device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。

（7）.顏色屬性：color | min-color | max-color。

（8）.顏色索引屬性：color-index | min-color-index | max-color-index。

（9）.黑白屬性：monochrome | min-monochrome | max-monochrome。

（10）.方向屬性：orientation。

（11）.解析度屬性：resolution | min-resolution | max-resolution。

（12）.網格屬性：grid。

上面當前主要的媒體屬性，有些屬性實在是不太常用，甚至一輩子都不會用到。

所以後面的程式碼例項只會簡單演示一些常見的媒體屬性，如果對其他屬性感興趣可以自行測試。

三.語法介紹：

媒體查詢有兩張應用場所，一種用在<link>與<style>元素之上，一種是CSS程式碼內部。

下面拋開媒體查詢具體的語法不談，首先演示一下使用場所。

[HTML] 純文字檢視 複製程式碼
<style media="screen and (max-width:1000px)" >
div{
  color:red;
}
</style>

通過media屬性規定媒體查詢的具體內容，對於<link>標籤也是同樣的道理。

上述程式碼規定必須是顯示器螢幕且視口尺寸小於等於1000px時候，能夠將div字型顏色設定為紅色。

[CSS] 純文字檢視 複製程式碼
@media screen and (max-width:1000px){
  div{
    color:red;
  }
}

上述程式碼應用於CSS程式碼內部，功能與前面的完全一樣，以@media作為媒體外掛的語法標記。

具體語法分析如下：

當媒體查詢為true時，就會應用對應的CSS樣式。

無論是通過media還是@media規定媒體查詢，語法都一致，且媒體屬性一定要用小括號包裹。

媒體查詢中有如果敢邏輯操作符，在構建多條件查詢的時候非常有用，屬於語法的一部分。

但是考慮到比較重要，下面單獨拿出來進行一下詳細介紹。

四.邏輯操作符：

媒體查詢中有四個邏輯操作符，分別是and、not、or和only，下面分別介紹一下它們的作用。

1.and操作符：

與JavaScript中的邏輯與操作符一個道理，比如兩側的條件都滿足時，才會返回true。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
@media screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

上述程式碼規定當前媒體必須滿足如下條件，才會將div顏色設定為紅色：

（1）.媒體型別必須是screen，也就是必須是顯示器，比如電腦或者手機登。

（2）.視口的尺寸必須大於等於800畫素，小於等於1200畫素，比如調整瀏覽器視口到此尺寸。

特別說明：如果操作符不是not或者only，那麼媒體型別是可選的，如果省略，那麼預設值是all。

所以上述程式碼可以修改如下：

[CSS] 純文字檢視 複製程式碼
@media (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

將媒體型別screen省略掉，功能沒有什麼變化。

2.not操作符：

此操作符用於對一個媒體查詢語句進行取反操作，類似於JavaScript中的邏輯非運算子。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
@media not screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

對上述程式碼分析如下：

（1）.not是對整個媒體查詢語句的一個取反，而不是對某一個媒體屬性取反。

（2）.所以上述程式碼等同於@media not( screen and (min-width:800px) and (max-width:1200px))。

3.or操作符：

與JavaScript邏輯或操作符相同道理，只要兩側滿足一條，那麼整個媒體查詢語句返回值為true。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
@media (max-width:500px) , (orientation: landscape) {
  div{
    color:red;
  }
}

特別說明：or操作符用逗號表示，否則會報錯。

只要滿足視口寬度小於等於500畫素或者橫屏的任意一條，那麼div字型顏色就會被設定為紅色。

4.only操作符：

此操作符可能未來就會被淘汰了，它是為了相容低版本的瀏覽器而存在的。

隨著軟硬體的發展進步，它可能就逐步失去存在的意義，下面簡單介紹一下。

看如下程式碼片段：

[HTML] 純文字檢視 複製程式碼
media="screen and (max-width:1000px)"{...}

較為老式的瀏覽器可能不支援媒體屬性相關的媒體查詢，上面的程式碼並沒有打算給這些瀏覽器使用。

但是在這些較為老式的瀏覽器中，上述程式碼實質上會被解析為如下程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
media="screen"{...}

因為較為老式的瀏覽器支援media="screen"，所以上述CSS程式碼會老式瀏覽器中生效。

下面通過only操作符對上述程式碼進行一下修改：

[HTML] 純文字檢視 複製程式碼
media="only screen and (max-width:1000px)"{...}

上述程式碼在較為老式的瀏覽器中被解析為如下程式碼：

[HTML] 純文字檢視 複製程式碼
media="only "{...}

但是並沒有一種叫做"only"的媒體型別，所以CSS程式碼就不會被應用。

五.媒體屬性：

媒體屬性比較多，下面只介紹一些比較常用的幾種。

且大多數支援min-或者max-字首，比如與width屬性關聯的屬性還有min-width和max-width。

為了節省篇幅和時間，只以width屬性為例子進行介紹，其他屬性也是如此。

（1）.內容顯示區域寬高比：

aspect-ratio屬性描述了內容輸出區域的寬高比，屬性值是以斜槓（/）分隔的整數。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
@media (aspect-ratio: 1/2) {
  div{
    color:red;
  }   
}

（2）.裝置寬高比：

和內容區域寬高比比較相似，屬性值格式相同。

關於它們之間的區別，以電腦端為例子，顯示器螢幕寬高比就是裝置寬高比。

但是瀏覽器客戶區的寬高比就是內容內容寬高比，是不是很容易理解了。

[CSS] 純文字檢視 複製程式碼
@media (device-aspect-ratio:16/9) {
  div{
    color:red;
  }
}

（3）.內容高度與內容寬度：

height與width描述了媒體內容輸出區域的高度和寬度，比如瀏覽器客戶區的高度和寬度。

[CSS] 純文字檢視 複製程式碼
@media (height:800px) {
  div{
    color:red;
  }      
}

寬度是同樣的道理，就不再舉例子了。

（4）.裝置高度與裝置寬度：

device-height與device-width描述了裝置的高度和寬度，比如顯示器螢幕的高度和寬度。

[CSS] 純文字檢視 複製程式碼
@media (device-width: 1200px) {
  div{
    color:red;
  }     
}

（5）.方向:

orientation規定了裝置是處於橫屏狀態還是豎屏狀態。

具有兩個屬性值，landscape表示橫屏，portrait表示豎屏。

[CSS] 純文字檢視 複製程式碼
@media (orientation: portrait) {
  div{
    color:red;
  }    
}

前面已經介紹了CSS 媒體查詢的相關內容，媒體查詢還有一些其他相關知識，可以參閱如下文章：

（1）.媒體查詢 rem 失效一章節。

（2）.JavaScript matchMedia()一章節。