腳本之家服務器常用軟件

快捷導航

CSS media queries

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

我要評論

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

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

CSS2/media

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

復制代碼

代碼如下:

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

復制代碼

代碼如下:

常用的媒體類型有

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

復制代碼

代碼如下:

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

復制代碼

代碼如下:

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

當媒體類型匹配且表達式為真的時候，對應style就會其作用，除非使用not或者only操作符，否則媒體類型不是必需的，默認代表所有媒體類型。

操作符
and

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

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

但是如果只想在橫向顯示時應用就可以使用and操作符把media type和media feature結合起來

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

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

逗號分隔的列表

在使用逗號分隔的查詢列表中每個查詢都被視為一個獨立的查詢，任何本查詢中的作用符不影響其他查詢，只要有一個查詢返回true，style就會被作用。

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

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

not操作符作用域整個查詢，所以只有在整個查詢返回false的情況下使用not后才會返回true。當使用逗號分隔的列表的時候not作用于鄰近的查詢，而不會作用于每個查詢

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

查詢其實會這樣起作用

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

而不是這樣

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

對于逗號分隔的列表

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

查詢是這樣子的

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

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

media features

說了好多次media feature了，到底有多少個media feature呢

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

有兩種常用的引入方式

1、link方法引入

2、@media引入

復制代碼

代碼如下:

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

瀏覽器兼容性

應用
For iPhone 4

For iPad

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

參考

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