HTML5實踐 -- CSS3 Media Queries

本文轉載自查看原文 2012-11-27 09:02 16469 HTML5/CSS3/ HTML5實踐/ web

　　轉載請注明原創地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

　　demo查看地址：http://www.webdesignerwall.com/demo/media-queries/

　　CSS2允許你對特定media類型制定樣式，例如針對屏幕或者打印機。css3提供了更加強大的media queries，你可以針對不同media類型設置表達式，根據不同的條件設置不同的樣式。例如你可以為大屏幕設置一種樣式，為mobile設置另外一種樣式。這個功能相當強大，你可以不修改頁面內容的情況下，為不同設備提供不同的樣式效果。下面的課程我們將會介紹到一些使用該技術的站點。

　　CSS3 Media Queries

　　打開我的demo頁面，調整瀏覽器打大小，查看頁面布局變化情況。

　　Max Width

　　當頁面視圖區域小於600px寬度的時候，css會被使用到。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

　　你也可以使用下面的方式，在頁面的<head>中引用外部css文件。

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

　　Min Width

　　當視圖區域大於900px寬度的時候，css會被使用到。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

　　多個 Media Queries

　　你可以把多個media queries組合在一起，當視圖區域寬度在600px到900px之間的時候，會使用下面的css。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

　　設備Width

　　下面的css會在 max-device-width為480px的時候使用，例如iphone。

　　note：max-device-width指的是設備實際分辨率，max-width指的是可是區域尺寸。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

　　針對 iPhone 4

　　下面的時針對iphone4的css。

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

　　針對 iPad

　　你也可以在ipad上檢查定位（portrait 或者 landscapse）。

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