免費的HTML5連載來了《HTML5網頁開發執行個體詳解》連載（六）媒體查詢，html5執行個體

免費的HTML5連載來了《HTML5網頁開發執行個體詳解》連載（六）媒體查詢，html5執行個體

響應式設計的另一個重要技術手段是媒體查詢。如果只是簡單的設計一個流式布局系統，那麼可以保證每個網格按比例的放大和縮小，但有可能會使得在小螢幕下（如手機裝置）網格太小而嚴重影響閱讀，這樣的設計稱不上響應式設計。媒體查詢可以來解決這一問題。媒體查詢可以為特定的瀏覽器和裝置提供特定的樣式。媒體查詢是CSS 3的一個新特性，是對媒體類型的擴充。

提示：W3C列出了10種媒體類型，請參考http://www.w3.org/TR/CSS2/media.html#media-types。

在響應式設計中，媒體查詢一般在CSS中定義，如最常見的使用方式設定螢幕寬度小於1024px時的樣式，代碼如下：

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

         // 在這時設定小於1024px時的樣式

}

設定螢幕寬度小於600px時的樣式，代碼如下：

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

         // 在這時設定小於600px時的樣式

}

設定螢幕寬度在600px~900px之間時的樣式，代碼如下：

@media screen and (max-width: 600px) and(min-width: 900px){

         // 設定樣式

}

設定裝置的實際解析度小於480px時的樣式（如iPhone），代碼如下：

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

         // iPhone手機樣式在這裡設定

}

設定iPad或iPhone在橫向時的樣式，代碼如下：

@media screen and (orientation:landscape){

         // 在這時設定樣式

}

提示：