一篇好文章，收藏以備用。
本文轉自W3CPLUS
原文：地址：http://www.w3cplus.com/css3/css3-media-queries-for-different-devices
最早在《CSS3 Media Queries》一文中初探了CSS3的媒體類型和媒體特性的相關應用。簡單的知道了使用這個能在各種不同的設備顯示不一樣的樣式風格。隨着Responsive的響應式設計的興起，前面跟大家一起學習了：
- 《Responsive設計和CSS3 Media Queries的結合》
- 《瞭解Responsive網頁設計的三個特性》
- 《Responsive設計的關鍵三步》
從這幾篇文章中可以知道，在Responsiv的設計中，CSS3的Media是起着非常關鍵性的作用，也可以說沒有CSS3 Media這個屬性，Responsiv設計是玩不起來，也是玩不轉的。大家都知道Responsiv是爲各種不同的設備進行樣式設計的，但有一個問題大家或許還處在模糊狀態，這個CSS3 Media要如何設置各自的臨界點？
那麼今天我們就針對上面的問題，一起來探討一下CSS3 Media Queries在各種不同設備（桌面，手機，筆記本，ios等）下的模板製作。那麼Media Queries是如何工作的？那麼有關於他的工作原理大家要是感興趣的話可以參考《CSS3 Media Queries》一文，裏面已經做過詳細的介紹，這裏就不在進行過多的闡述。
CSS3 Media Queries模板
CSS3 Media Queries一般都是使用“max-width”和“min-width”兩個屬性來檢查各種設備的分辨大小與樣式表所設條件是否滿足，如果滿足就調用相應的樣式。打個比方來說，如果你的Web頁面在960px的顯屏下顯示，那麼首先會通過CSS3 Media Queries進行查詢，看看有沒有設置這個條件樣式，如果找到相應的，就會採用對應下的樣式，其他的設備是一樣的道理。下面具體看看“max-width”和“min-width”模板：
使用max-width
@media screen and (max-width: 600px) {
//你的樣式放在這裏....
}
使用min-width
@media screen and (min-width: 900px) {
//你的樣式放在這裏...
}
max-width和min-width的混合使用
@media screen and (min-width: 600px) and (max-width: 900px) {
//你的樣式放在這裏...
}
同時CSS3 Media Queries還能查詢設備的寬度“device-width”來判斷樣式的調用，這個主要用在iPhone,iPads設備上，比如像下面的應用：
iPhone和Smartphones上的運用
/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
//你的樣式放在這裏...
}
max-device-width指的是設備整個渲染區寬度（設備的實際寬度）
iPads上的運用
/* iPads (landscape) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
//你的樣式放在這裏...
}
/* iPads (portrait) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
//你的樣式放在這裏...
}
針對移動設備的運用，如果你想讓樣式工作得比較正常，需要在“<head>”添加“viewport”的meta標籤：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
有關於這方面的介紹大家可以看看這個blog上進行的的移動端開發的相關總結。
調用獨立的樣式表
你可能希望在不同的設備下調用不同的樣式文件，方便管理或者維護，那麼你可以按下面的這種方式進行調用：
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" />
<link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />
CSS3 Media Queries在標準設備上的運用
下面我們一起來看看CSS3 Meida Queries在標準設備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名爲“responsive.css”文件，並在相應的條件中寫上你的樣式，讓他適合你的設計需求：
1、1024px顯屏
@media screen and (max-width : 1024px) {
/* CSS Styles */
}
2、800px顯屏
@media screen and (max-width : 800px) {
/* CSS Styles */
}
3、640px顯屏
@media screen and (max-width : 640px) {
/* CSS Styles */
}
4、iPad橫板顯屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* CSS Styles */
}
5、iPad豎板顯屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* CSS Styles */
}
iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* CSS Styles */
}
現在有關於這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下：
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }
在bootstrap中的responsive.css採用的是網格佈局，大家可以到官網查看或下載其源碼進行學習。另外960gs爲大家提供了一個Adapt.js也很方便的幫大家實現上述效果。感興趣的同學可以去了解了解。
下面給大家提供幾個這方面的案例，以供大家參考：
- 《CSS3 Media Queries案例——Hicksdesign》
- 《CSS3 Media Queries案例——Tee Gallery》
- 《CSS3 Media Queries案例——A List Apart》
更新CSS3 Media Queries模板查詢
1、Smartphones (portrait and landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
2、Smartphones (landscape)
@media only screen and (min-width : 321px) {
/* Styles */
}
3、Smartphones (portrait)
@media only screen and (max-width : 320px) {
/* Styles */
}
4、iPads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
5、iPads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
6、iPads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
7、iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
8、640px顯屏
@media screen and (max-width : 640px) {
/* CSS Styles */
}
9、800px顯屏
@media screen and (max-width : 800px) {
/* CSS Styles */
}
10、1024顯屏
@media screen and (max-width : 1024px) {
/* CSS Styles */
}
11、Desktops and laptops
@media only screen and (min-width : 1224px) {
/* Styles */
}
12、Large screens
@media only screen and (min-width : 1824px) {
/* Styles */
}
那麼有關於CSS3 Media Queries模板的相關介紹就說到這裏了，最後希望大家喜歡。如果你覺得這篇文章對你有所幫助或者比較有實用價值，您可以把他推薦給您的朋友，如果你有更好的分享可以在下面的評論中直接與我們一起分享您的經驗。
2012年10月09日更新
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
