如何使用Media Queries媒體查詢:
（1）<head>里邊
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
（2）style 里邊
@media only screen and (max-device-width:480px){/*css樣式*/}
【注意事項】：上面的兩種寫法都是針對老版iphone的解決方案（320x480的解決方案）
（一）iOS 設備
1. iPhone 4
iPhone4上你就不能使用device-height或者device-width來設置媒體查詢的條件，因為iPhone4的屏幕大小也是320x480的，跟老版本的iPhone和iPod是一樣的。iPhone 4上的像素密集程度是兩倍於我們視網膜的呈現的，所
以在iPhone 4設備上要呈現出來的話需要兩倍於我們眼睛實際看到的尺寸的圖片（也就是我們通常所說的高清晰 圖標的效果）。要實現這個效果，不能用height或者width，而要使用屬性-webkit-min-device-pixel-ratio這個屬性。不過，需要提醒的一點，這里僅僅是針對webkit內核的瀏覽器，所以在其他內核的瀏覽器上不適用哦。使用方法如下：
@media only screen and (-webkit-min-device-pixel-ratio:2){/*針對iphone4的css樣式*/}
2. iPhone 3 和 iPod(320x480像素的解決方案)
@media only screen and (max-device-width:480px){/*針對iPhone 3和iPod的css樣式*/ }
3.iPad
iPad上要使用device-width而不是max-device-width,並且可以設置橫屏和豎屏模式
@media only screen and (device-width:768px){/*針對ipad的css樣式*/}
@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){/*ipad豎屏的css樣式*/}
@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape){/*ipad橫屏的css樣式*/}
/* 判斷ipad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}
/* ipad橫屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}
/* ipad豎屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}
/* 判斷iphone5 *//* 橫屏豎屏判斷方法與ipad一樣 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
/* style */
}
/* 判斷iphone4-iphone4s *//* 橫屏豎屏判斷方法與ipad一樣 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
/* style */
}
/* iphone5分辨率 */
screen Width = 320px (css像素)
screen Height = 568px (css像素)
screen Width = 640px (實際像素)
screen Height = 1136px (實際像素)
Device-pixel-ratio:2
/* iphone4-iphone4s分辨率 */
screen Width = 320px (css像素)
screen Height = 480px (css像素)
screen Width = 640px (實際像素)
screen Height = 960px
（二）Android設備
Android設備最奇妙也是最讓人頭疼的地方就是支持太多的屏幕顯示尺寸。在某種意義上，對手持設備的制造廠商來說肯定是件好事，但是可苦了圖形設計師們了。設計師們不得不做好幾種尺寸的圖片來滿足最大眾的需求。當然這也是興趣所在了。長話短說，Android設備上可以創建三種不同密度的圖片：low、media和high。創建這三種效果的圖片可以使用如下的媒體查詢方式：
@media only screen and (-webkit-device-pixel-ratio:.75){/*低分辨率小尺寸的圖片樣式*/}
@media only screen and (-webkit-device-pixel-ratio:1){/*普通分辨率普通尺寸的圖片樣式*/}
@media only screen and (-webkit-device-pixel-ratio:1.5){/*高分辨率大尺寸的圖片樣式*/}
（三）Windows Phone 7
到這篇文章為止，Windows Phone 7的媒體查詢是受限制的，參見這里，在WP7上你不能使用initial-scale, maximum-scale,minimum-scale這些屬性，因為在所有的WP7設備上都會顯示是320px的寬度。但是不要氣餒，其實我們還是可以在WP7上使用媒體查詢的，只要如下的寫法就可以了：
<!--[if IEMobile 7]><link rel="stylesheet" type="text/css" href="xxx.css" media="screen"><![endif]-->