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

時間 2019-11-11

標籤 css3 css 媒體查詢 media queries 移動設備顯示尺寸大全欄目 CSS 简体版

原文原文鏈接

媒體查詢介紹

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

先看一個簡單的例子：css

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

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

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

前面這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和 媒體特性（Media Query），首先一塊兒來理解一下這兩個概念：前端

媒體類型(Media Type)在css2中是一個常見的屬性，也是一個很是有用的屬性，能夠經過媒體類型對不一樣的設備指定不一樣的樣式，在css2中咱們常碰到的就是all（所有）,screen（屏幕）,print（頁面打印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。html5

媒體特性Media Query當作Media Type(判斷條件)+CSS(符合條件的樣式規則),爲了更能理解Media Query，咱們在次回到前面的實例上：android

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

轉換成css中的寫法爲：css3

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

其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){...}的大括號之中。在語句上面的語句結構中，能夠看出Media query和css的屬性集合很類似，主要區別在：web

一、Media query只接受單個的邏輯表達式做爲其值，或者沒有值；
二、css屬性用於聲明如何表現頁頁的信息；而Media Query是一個用於判斷輸出設備是否知足某種條件的表達式；
三、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關係，表示應用於大於等於或者小於等於某個值的狀況；
四、CSS屬性要求必須有屬性值，Media Query能夠沒有值，由於其表達式返回的只有真或假兩種.

經常使用的Media Query以下表所示：chrome

兼容的瀏覽器：windows

Media Queries具體使用

下面咱們一塊兒來看看Media Queries的具體使用方式瀏覽器

1、最大寬度Max Width

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

上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。

2、最小寬度Min Width

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

3、多個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頁面。

4、設備屏幕的輸出寬度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所指的是設備的實際分辨率，也就是指可視面積分辨率

5、iPhone4

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

上面的樣式是專門針對iPhone4的移動設備寫的。

6、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來渲染頁面。

7、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手機的頁面重構問題。

8、not關鍵字

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

not關鍵字是用來排除某種制定的媒體類型，換句話來講就是用於排除符合表達式的設備。

9、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，樣式都不會被採用。

10、其餘

在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以上顯示屏樣式*/}