CSS3 Media Queries 多媒體查詢實作響應式設計

  現在移動端的使用者和流量遠遠高于pc端的，做網站隻做pc端已經需求不大，做兩個版本又耗費資源，雖然單獨做的使用者體驗會更好，可是也要分情況，比如服務多功能類，比較複雜的網站分開做兩個版本會好很多，不過資源有限的時候，響應式網站就對于維護和開發顯得很有必要。

響應式是根據裝置的多媒體查詢文法，由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立傳回 true 或 false，寬度自動适應，配置設定，排版和縮放，是以可以相容多個終端。

首先來區分一下屬性media的值概念：

max-device-width：裝置可視寬度，PC浏覽器随意縮放時不會執行css，因為裝置寬度沒變化，如果是使用手機橫豎屏，也不會執行css，因為手機的寬度沒變化。

max-width：顯示區域的寬度，比如浏覽器的寬度，手機浏覽器的寬度，是以寬度改變時會執行css。

在頭部用link引入：

在頭部link引入時，可以在link中加入media屬性在限制，當滿足media條件時才會映入該css檔案，如下：

當螢幕的寬度大于等于400px的時候。

<link rel="stylesheet" type="text/css" href="style_01.css" target="_blank" rel="external nofollow"  media="screen and (min-width: 400px)">
           

寬度也可以是一個範圍：大于600小于800時

<link rel="stylesheet" type="text/css" href="styleB.css" target="_blank" rel="external nofollow"  media="screen and (min-width: 600px) and (max-width: 800px)">
           

也可以是直接引入css檔案，而響應式代碼塊可嵌套在css檔案中，@media之間可以互相嵌套。

@media screen and (max-device-width: 640px) {
 
@media screen and (max-device-width: 320px) { } 
@media screen and (max-device-width: 360px) { } 

} 

@media screen and (min-device-width: 641px) and (max-device-width: 1000px) { }
           

自适應代碼min-width和max-width使用要領：

在不确定使用min-width或者是max-width的時候，可以假設寬度是個螢幕寬度為X，要滿足min-width<x<max-width，是以當隻使用min時，查詢寬度從小到大；

@media (min-width: 768px){ //>=768的裝置 } @media (min-width: 992px){ //>=992的裝置 } @media (min-width: 1200){ //>=1200的裝置 }

隻使用max時，查詢寬度從大到小；max-width>x>min-width

@media (max-width: 1199){ //<=1199的裝置 } 
@media (max-width: 991px){ //<=991的裝置 } 
@media (max-width: 767px){ //<=768的裝置 }

           

進階的混合應用

min-width和min-width也可以混合使用，查詢寬度從大到小逐一排查，如下css，當螢幕寬度x的最小寬度是1200px時，最大寬度就不可能小于479px，是以實作{ }代碼塊；如果反過來，當最大螢幕寬度是1200px時，原則上是實作對應的代碼快，可是不管是最小寬度還是最大寬度479px都比1200px小，是以會産生沖突。

@media screen and (min-width:1200px){} //@media screen and (max-width:1200px){} 反過來不成立 @media screen and (min-width: 960px) and (max-width: 1199px) { } 
@media screen and (min-width: 768px) and (max-width: 959px) { }
@media only screen and (min-width: 480px) and (max-width: 767px){ } 
@media only screen and (max-width: 479px) { }
           

寬高比

CSS3 Media Queries 多媒體查詢中可以設定裝置的寬高比，來實響應對應的代碼，用aspect-ratio定義'width'與'height'的比率，符合條件則實作{ }的css樣式。

支援min，max字首，是以派生出min-aspect-ratio和max-aspect-ratio兩個媒體特征，表示最小最大的的寬高比。

@media ( aspect-ratio: 3/2 ){ body{ background: #0381bb; } } //支援min和max 
@media (min-aspect-ratio: 3/2 ){ body{ background: #0381bb; } }
           

以上是裝置寬高比，那麼顯示器寬高比呢，是以可以派生出min-device-aspect-ratio和max-device-aspect-ratio兩個媒體特性，如常見的顯示器比率有4/3, 16/9, 16/10

@media( device-aspect-ratio: 2/3 ){   body{     background: #0381bb;   } }
           

裝置的使用方向:定義'height'是否大于或等于'width'。如果 高>=寬 ，則orientation: landscape ，portrait代表是，landscape代表否

@media( orientation: landscape ){ body{ background: #27ae60; } } 
@media (orientation: portrait ){ body{ background: #f2cb2b; } }
           

除了可以計算裝置的寬度之外，當然也是可以計算比較高度，雖然這種情況比較少。

@media ( max-device-height: 480px ){ body{ background: #f3581a; } } 
@media ( max-device-width: 767px ){   body{     background: #c36cea;   } }
           

逗号分割條件

如果想用多個限制條件，可以用逗号分隔連接配接多個媒體查詢：

@media screen and ( orientation: landscape ), screen and ( min-width: 700px ){ body{ background: #c0392b; } }
           

on，only

當時用操作符not時，一定要明确地指定媒體的類型，意思是除了規定條件之外，其他的都執行{ }代碼塊，排除掉某些特定的裝置。

類似的還有only，用來定某種特别的媒體類型。

@media not screen and ( max-width:959px){ body{ background: #ccc; } }//除了寬度比959px小的之外，寬度比959px的時候都顯示背景灰色。
           

以上是CSS3 Media Queries 多媒體查詢實作響應式設計的一些技巧和應用，多媒體查詢經常用到，注意到以上提到的細節就不會淩亂或者出錯啦。