免費的HTML5連載來了《HTML5網頁開發例項詳解》連載（六）媒體查詢
響應式設計的另一個重要技術手段是媒體查詢。如果只是簡單的設計一個流式佈局系統，那麼可以保證每個網格按比例的放大和縮小，但有可能會使得在小螢幕下（如手機裝置）網格太小而嚴重影響閱讀，這樣的設計稱不上響應式設計。媒體查詢可以來解決這一問題。媒體查詢可以為特定的瀏覽器和裝置提供特定的樣式。媒體查詢是CSS 3的一個新特性，是對媒體型別的擴充套件。
在響應式設計中，媒體查詢一般在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){
// 在這時設定樣式
}
提示：更多關於媒體查詢請參考http://www.w3.org/TR/css3-mediaqueries/。
學習HTML5最好的書就是《HTML5網頁開發例項詳解》，用程式碼學習用案例學習，可比看文字有趣多了！！！一本書搞定HTML5，從現在開始。
