碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2015-08-24 09:09   16127    css3/html5/ media/ 媒體查詢/ css3

媒體查詢介紹

我今天就總結一下響應式設計的核心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如下表所示：

兼容的瀏覽器：

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 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css3 media媒體查詢器用法總結 CSS 媒體查詢@media CSS-媒體查詢與設備尺寸參考 【css】媒體查詢（@media 查詢） @media 媒體查詢 CSS-@media媒體查詢(輸出設備中的頁面可見區域寬度) CSS3多媒體查詢 iPhone6的CSS3媒體查詢 CSS3媒體查詢使用小結 css媒體查詢 @media適配不同大小窗口
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM