Css3的Media Query方法總結—讓您的網站相容手機

標籤：

一、Css3的Media Queries 翻譯成中文是“媒體查詢”，有如下幾種引入方式：1、直接head中引用，其實media在css2中已經存在，不過，他的主要作用您沒有關注，相容所有媒體等。你肯定見到過如下的寫法：

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

現在，我們為了相容螢幕的大小，可以這麼寫：

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

在螢幕最大是600px的時候載入“smallscreen.css”

2、@import 方式引用，這種方式的引用，要在style中，寫法如下：

<style type="text/css" media="screen"> 或者寫成<style type="text/css" media="screen and (max-width: 600px)">     @import url("css/style.css");  </style>

也就是在特定螢幕下載入style.css

3、我最常用的是第三種方法，也就是下面的這種方法：

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

直接在樣式中寫@media螢幕控制。

二、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"  />

上面表示的是：當螢幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。

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的裝置上。

Css3的Media Query方法總結—讓您的網站相容手機