CSS media queries

謙行發表於2013-08-25
CSS

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

CSS2/media

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

@media print {
   /* 適用於印刷的樣式 */
 }
<link href="css/print.css" rel="stylesheet" type="text/css" 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增加了更多的媒體查詢，同時可以新增不同的媒體型別的表示式用來檢查媒體是否符合某些條件，比如如果網頁用PC訪問和Pad訪問使用不同的style，在CSS2中只能把媒體型別設為screen是不能做到的，而在CSS3中可以對screen型別媒體設定表示式進一步判斷螢幕大小來實現這一功能。可以寫出這樣的程式碼

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<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

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

media features

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

  • width：瀏覽器寬度
  • height：瀏覽器高度
  • device-width：裝置螢幕解析度的寬度值
  • device-height：裝置螢幕解析度的高度值
  • orientation：瀏覽器視窗的方向縱向還是橫向，當視窗的高度值大於等於寬度時該特性值為portrait，否則為landscape。
  • aspect-ratio：比例值，瀏覽器的縱橫比.
  • device-aspect-ratio：比例值，螢幕的縱橫比.
  • color：裝置使用多少位的顏色值，如果不是彩色裝置，值為0
  • color-index：色彩表的色彩數
  • monochrome：單色幀緩衝器每個畫素的位元組
  • resolution：解析度值，裝置解析度值
  • scan：電視機型別裝置掃描方式，progressive或interlace
  • grid：只能指定兩個值0或1

如何引入media

 

有兩種常用的引入方式

1、link方法引入

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

2、@media引入

@media screen and (min-width: 600px) and (max-width: 800px){

    選擇器{

        屬性：屬性值；

    }

}

瀏覽器相容性

media-query-browers

 

應用

For iPhone 4

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

For iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

移動裝置iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad宣告瞭不同的方向，比如說上面的例子，在縱向(portrait)時採用portrait.css來，在橫向（landscape）時採用landscape.css。

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

相關文章