media query 在響應試網頁中的準確應用

    咱們都知道html5中的媒體查詢（media query）對於響應試網頁的重要性，它爲咱們提供了檢測屏幕設備的有效方法，因此，當咱們開發頁面的時候，就能夠很方便的根據media query 來檢查屏幕尺寸，並加載相應的css樣式。

可是，從目前咱們常見的桌面電腦、平板電腦再到智能手機，屏幕尺寸如此之多以致讓許多web前端開發者們都十分頭疼。最近發現了一個很是實用的網站responsivewebcss，它爲響應試網頁開發者們提供了一個專門的屏幕尺寸檢測工具，進入網站後，只需選擇相應的屏幕設備尺寸，該工具就會爲你自動生成相應的媒體查詢。

 

 

如下是總結的媒體查詢代碼，涉及了目前主流設備屏幕的尺寸，但願對你們有所幫助。當咱們使用的時候，直接將相依的css樣式放入media媒體查詢內便可。

/* ipad等平板設備 (1024px) 屏幕尺寸在480px到1024px之間，且設備爲橫屏狀態 */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
}
 
/* ipad或大尺寸智能手機設備  (768px)  屏幕尺寸在321px到1024px之間，且設備爲豎屏狀態  */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
}
 
/* Phone 橫屏狀態 (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
}
 
/* Phone 豎屏狀態 (320px) */
@media only screen and (max-width: 320px) {
}

 responsivewebcss官網