天天看點
傳回

CSS3的媒體查詢(Media Queries)與移動裝置顯示尺寸大全

媒體查詢介紹

我今天就總結一下響應式設計的核心CSS技術Media(媒體查詢器)的用法。

先看一個簡單的例子：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media語句表示的是：當頁頁寬度小于或等于600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的内容：

  • 1、screen：這個不用說大家都知道，指的是一種媒體類型；
  • 2、and：被稱為關鍵詞，與其相似的還有not,only，稍後會介紹；
  • 3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。

前面這個簡單的執行個體引出兩個概念性的東西，一個就是媒體類型（Media Type）和 媒體特性（Media Query），首先一起來了解一下這兩個概念：

媒體類型(Media Type)在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的裝置指定不同的樣式，在css2中我們常碰到的就是all（全部）,screen（螢幕）,print（頁面列印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。

媒體特性Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則),為了更能了解Media Query，我們在次回到前面的執行個體上：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

轉換成css中的寫法為：

@media screen and (max-width: 600px) {
    選擇器 {
      屬性：屬性值；
    }
  }

其實就是把small.css檔案中的樣式放在了@media srceen and (max-width;600px){...}的大括号之中。在語句上面的語句結構中，可以看出Media query和css的屬性集合很相似，主要差別在：

  • 1、Media query隻接受單個的邏輯表達式作為其值，或者沒有值；
  • 2、css屬性用于聲明如何表現頁頁的資訊；而Media Query是一個用于判斷輸出裝置是否滿足某種條件的表達式；
  • 3、Media Query其中的大部分接受min/max字首，用來表示其邏輯關系，表示應用于大于等于或者小于等于某個值的情況；
  • 4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式傳回的隻有真或假兩種.

常用的Media Query如下表所示：

CSS3的媒體查詢(Media Queries)與移動裝置顯示尺寸大全

相容的浏覽器：

CSS3的媒體查詢(Media Queries)與移動裝置顯示尺寸大全

Media Queries具體使用

下面我們一起來看看Media Queries的具體使用方式

一、最大寬度Max Width 

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：當螢幕小于或等于600px時，将采用small.css樣式來渲染Web頁面。

二、最小寬度Min Width 

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

三、多個Media Queries使用 

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當螢幕在600px-900px之間時采用style.css樣式來渲染web頁面。

四、裝置螢幕的輸出寬度Device Width 

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上面的代碼指的是iphone.css樣式适用于最大裝置寬度為480px，比如說iPhone上的顯示，這裡的max-device-width所指的是裝置的實際分辨率，也就是指可視面積分辨率

五、iPhone4 

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的樣式是專門針對iPhone4的移動裝置寫的。

六、iPad 

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大數情況下，移動裝置iPad上的Safari和在iPhone上的是相同的，隻是他們不同之處是iPad聲明了不同的方向，比如說上面的例子，在縱向（portrait）時采用portrait.css來渲染頁面；在橫向（landscape）時采用landscape.css來渲染頁面。

七、android 

/*240px的寬度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我們可以使用media query為android手機在不同分辨率提供特定樣式，這樣就可以解決螢幕分辨率的不同給android手機的頁面重構問題。

八、not關鍵字 

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達式的裝置。

九、only關鍵字 

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only用來定某種特定的媒體類型，可以用來排除不支援媒體查詢的浏覽器。

其實only很多時候是用來對那些不支援Media Query但卻支援Media Type的裝置隐藏樣式表的。

其主要有：支援媒體特性（Media Queries）的裝置，正常調用樣式，此時就當only不存在；對于不支援媒體特性(Media Queries)但又支援媒體類型(Media Type)的裝置，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支援Media Qqueries的浏覽器，不論是否支援only，樣式都不會被采用。

十、其他

在Media Query中如果沒有明确指定Media Type，那麼其預設為all，如：

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外還有使用逗号（，）被用來表示并列或者表示或，如下

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小于或等于480px的手持裝置上，或者被用于螢幕寬度大于或等于960px的裝置上。

下面具體講解過程：

準備工作1：設定Meta标簽

首先我們在使用Media的時候需要先設定下面這段代碼，來相容移動裝置的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這段代碼的幾個參數解釋：

  • width = device-width：寬度等于目前裝置的寬度
  • initial-scale：初始的縮放比例（預設設定為1.0）  
  • minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）    
  • maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）   
  • user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）

準備工作2：加載相容檔案JS

因為IE8既不支援HTML5也不支援CSS3 Media，是以我們需要加載兩個JS檔案，來保證我們的代碼實作相容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

準備工作3：設定IE渲染方式預設為最高(這部分可以選擇添加也可以不添加)

現在有很多人的IE浏覽器都更新到IE9以上了，是以這個時候就有又很多詭異的事情發生了，例如現在是IE9的浏覽器，但是浏覽器的文檔模式卻是IE8:

為了防止這種情況，我們需要下面這段代碼來讓IE的文檔模式永遠都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不過又有一個更給力的寫法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎麼這段代碼後面加了一個chrome=1，這個Google Chrome Frame（谷歌内嵌浏覽器架構GCF），如果有的使用者電腦裡面裝了這個chrome的插件，就可以讓電腦裡面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過如果使用者沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上，不過不用也是可以的。

進入CSS3 Media

一般寫法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

應該有人會發現上面這段代碼裡面有個screen，他的意思是在告知裝置在列印頁面時使用襯線字型，在螢幕上顯示時用無襯線字型。但是目前我發現很多網站都會直接省略screen,因為你的網站可能不需要考慮使用者去列印時，你可以直接這樣寫：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

其中css2的媒體查詢：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

我們想知道移動裝置是不是縱向放置的顯示屏，可以這樣寫：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我們把第一段的代碼也用CSS2來實作，讓它一樣可以讓頁面寬度小于960的執行指定的樣式檔案：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

但是上面這個方法， 最大的弊端是他會增加頁面http的請求次數，增加了頁面負擔，我們用CSS3把樣式都寫在一個檔案裡面才是最佳的方法。   下面的寫法是實作尺寸等于480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

//自己添加的樣式

}

其中對于-webkit-min-device-pixel-ratio作如下解釋：

-webkit-min-device-pixel-ratio為1.0：

  • 1.所有非Retina的Mac
  • 2.所有非Retina的iOS裝置
  • 3.Acer Iconia A500
  • 4.Samsung Galaxy Tab 10.1
  • 5.Samsung Galaxy S

-webkit-min-device-pixel-ratio為1.3：

  • 1. Google Nexus 7

-webkit-min-device-pixel-ratio為1.5：

  • 1.Google Nexus S
  • 2.Samsung Galaxy S II
  • 3.HTC Desire
  • 4.HTC Desire HD
  • 5.HTC Incredible S
  • 6.HTC Velocity
  • 7.HTC Sensation

-webkit-min-device-pixel-ratio為2.0：

  • 1.iPhone 4
  • 2.iPhone 4S
  • 3.iPhone 5
  • 4.iPad (3rd generation)
  • 5.iPad 4
  • 6.所有Retina displays 的MAC
  • 7.Google Galaxy Nexus
  • 8.Google Nexus 4
  • 9.Google Nexus 10
  • 10.Samsung Galaxy S III
  • 11.Samsung Galaxy Note II
  • 12.Sony Xperia S
  • 13.HTC One X  

媒體查詢之device-aspect-ratio

說明：本文檔相容性測試基礎環境為：windows系統；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

文法：

device-aspect-ratio：<ratio>

取值：

<ratio>：指定比率

說明： 定義輸出裝置的螢幕可見寬度與高度的比率。

  • 如常講的顯示器螢幕比率：

    4/3

     , 

    16/9

     , 

    16/10
  • 本特性接受min和max字首，是以可以派生出

    min-device-aspect-ratio

     和

    max-device-aspect-ratio

     兩個媒體特性。

一般例子：

@media screen and (device-aspect-ratio:4/3){ … }
@import url(example.css) screen and (min-device-aspect-ratio:4/3);

版本支援：IE9以及以上的浏覽器開始支援

例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>media features device-aspect-ratio_CSS參考手冊_web前端開發參考手冊系列</title>
<style>
@media screen and (device-aspect-ratio:16/10){
    body{color:#f00;}
}
</style>
</head>
<body>
<div class="test">當你将輸出裝置螢幕分辨率為16:10時，本行文字顯示為紅色</div>
<script>
</script>
</body>
</html>

執行個體,判斷螢幕橫屏：

@media screen and (min-aspect-ratio: 13/8) {
   
}

移動裝置顯示尺寸大全 

@media screen and ( min-width: 212px){/*213px顯示屏樣式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px顯示屏樣式 蘋果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px顯示屏樣式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px顯示屏樣式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px顯示屏樣式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px顯示屏樣式 蘋果6plus*/}
@media screen and ( min-width: 423px){/*424px顯示屏樣式 LG 4X */}
@media screen and ( min-width: 479px){/*480px顯示屏樣式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px顯示屏樣式 摩托羅拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px顯示屏樣式*/}
@media screen and ( min-width: 640px){/*640px以上顯示屏樣式*/}
PS：一般用蘋果的螢幕适配就不會有問題

8plus 寬度：375

6plus 寬度：414

參考位址：http://www.w3cplus.com/content/css3-media-queries 

移動開發 前端
上一篇: CSS3 Media Queries媒體查詢
下一篇: CSS3 @Media 媒體查詢CSS @media 規則

繼續閱讀