CSS media queries

發(fā)布時(shí)間：2013-08-29 12:05:17 作者：佚名

最近在做一些頁面打印時(shí)的特殊處理接觸到了media queries，想系統(tǒng)學(xué)習(xí)一下，在MOZILLA DEVELOPER NETWORK看到一篇文章講的很不錯(cuò)，結(jié)合自己的使用總結(jié)一下

最近在做一些頁面打印時(shí)的特殊處理接觸到了media queries，想系統(tǒng)學(xué)習(xí)一下，在MOZILLA DEVELOPER NETWORK看到一篇文章講的很不錯(cuò)，結(jié)合自己的使用總結(jié)一下。

CSS2/media

在CSS2中可以使用media屬性可以使特定style只在指定媒體類型下其作用,比如頁面有些部分需要在打印的時(shí)候隱藏或者變大，這時(shí)候可以使用media使某些style只在打印的時(shí)候生效

復(fù)制代碼

代碼如下:

@media print {
/* 適用于印刷的樣式 */
}

復(fù)制代碼

代碼如下:

常用的媒體類型有

1.all（所有），適用于所有設(shè)備。
2.handheld（手持），用于手持設(shè)備。
3.print（印刷），用于分頁材料以及打印預(yù)覽模式下在屏幕上的文檔視圖。
4.projection（投影），用于投影演示文稿，例如投影儀。
5.screen（屏幕），主要用于計(jì)算機(jī)屏幕。
在使用的時(shí)候可以在樣式表直接書寫 @media指令+空格+媒體類型（多個(gè)都好隔開）

復(fù)制代碼

代碼如下:

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }parsing-errors
}
@media screen, print {
body { line-height: 1.2 }
}

CSS3/meidia queries

在CSS3中對其進(jìn)行了增強(qiáng)，添加了更多的媒體查詢，CSS3中的Media Queries增加了更多的媒體查詢，同時(shí)可以添加不同的媒體類型的表達(dá)式用來檢查媒體是否符合某些條件，比如如果網(wǎng)頁用PC訪問和Pad訪問使用不同的style，在CSS2中只能把媒體類型設(shè)為screen是不能做到的，而在CSS3中可以對screen類型媒體設(shè)置表達(dá)式進(jìn)一步判斷屏幕大小來實(shí)現(xiàn)這一功能?？梢詫懗鲞@樣的代碼

復(fù)制代碼

代碼如下:

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /></p> <p>
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

當(dāng)媒體類型匹配且表達(dá)式為真的時(shí)候，對應(yīng)style就會(huì)其作用，除非使用not或者only操作符，否則媒體類型不是必需的，默認(rèn)代表所有媒體類型。

操作符
and

and操作符用于將多個(gè)media feature組合成一個(gè)查詢，同時(shí)用于組合media type 和media feature，一個(gè)基本的media query類似這樣，一個(gè)meidia feature作用于所有media type

@media (min-width: 700px) { ... }

但是如果只想在橫向顯示時(shí)應(yīng)用就可以使用and操作符把media type和media feature結(jié)合起來

@media (min-width: 700px) and (orientation: landscape) { ... }
這樣上面的media query只有在可視窗口（viewport）最小是700px并且是橫向顯示的時(shí)候才返回true，如果還想進(jìn)一步限制設(shè)備為tv可以這樣

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

逗號(hào)分隔的列表

在使用逗號(hào)分隔的查詢列表中每個(gè)查詢都被視為一個(gè)獨(dú)立的查詢，任何本查詢中的作用符不影響其他查詢，只要有一個(gè)查詢返回true，style就會(huì)被作用。

舉例來說，如果希望特定style在viewport最小寬度為700px或手持式設(shè)備上生效，可以這么寫：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }not

not操作符作用域整個(gè)查詢，所以只有在整個(gè)查詢返回false的情況下使用not后才會(huì)返回true。當(dāng)使用逗號(hào)分隔的列表的時(shí)候not作用于鄰近的查詢，而不會(huì)作用于每個(gè)查詢

@media not all and (monochrome) { ... }

查詢其實(shí)會(huì)這樣起作用

@media not (all and (monochrome)) { ... }

而不是這樣

@media (not all) and (monochrome) { ... }

對于逗號(hào)分隔的列表

@media not screen and (color), print and (color)

查詢是這樣子的

@media (not (screen and (color))), print and (color)only

only操作符用于阻止不支持帶有media feature的media queries的瀏覽器應(yīng)用特定style

media features

說了好多次media feature了，到底有多少個(gè)media feature呢

•width：瀏覽器寬度
•height：瀏覽器高度
•device-width：設(shè)備屏幕分辨率的寬度值
•device-height：設(shè)備屏幕分辨率的高度值
•orientation：瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時(shí)該特性值為portrait，否則為landscape。
•aspect-ratio：比例值，瀏覽器的縱橫比.
•device-aspect-ratio：比例值，屏幕的縱橫比.
•color：設(shè)備使用多少位的顏色值，如果不是彩色設(shè)備，值為0
•color-index：色彩表的色彩數(shù)
•monochrome：單色幀緩沖器每個(gè)像素的字節(jié)
•resolution：分辨率值，設(shè)備分辨率值
•scan：電視機(jī)類型設(shè)備掃描方式，progressive或interlace
•grid：只能指定兩個(gè)值0或1
如何引入media

有兩種常用的引入方式

1、link方法引入

2、@media引入

復(fù)制代碼

代碼如下:

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

瀏覽器兼容性

應(yīng)用
For iPhone 4

For iPad

For Android

復(fù)制代碼

代碼如下:

/*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" />

參考

http://www.w3cplus.com/content/css3-media-queries

http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries