免費的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,從現在開始。