標籤：
如今試圖解決android平板的螢幕解析度問題，眼下主要想到的辦法是採用響應式設計和媒體查詢，發現不管使用那種方式，工作量都非常大，調試都困難，悲催啊。
CSS的媒體查詢儘管在傳統的互連網頁面可能發揮的餘地不是非常大，可是自從蘋果和安卓的風靡之後，移動平台上的web開發變得越來越流行了，同一時候CSS的媒體查詢可謂派上了大用場了。
下面為翻譯內容，原文來自這裡 很棒的一篇文章
關於CSS media queries想瞭解很多其它，參看這裡
怎樣使用Media Queries媒體查詢:
媒體查詢就像是一個CSS選取器或者假設你接觸過資料庫的話，就像是SQL查詢語句。媒體查詢實際上就是一種文法規
則，能夠方便的從一大堆元素裡擷取幾個元素。這樣就方便你應對一些特定的尺寸或者指定一些特殊的解決方式了。媒體
查詢的代碼能夠放在<head>元素裡，也能夠放在styleSheet樣式表裡的不論什麼地方。可是須要注意的是，在不論什麼時候，媒體查
詢都必須以keywordmedia開頭，後面跟你要顯示的css樣式。
（一）放在head標籤中的寫法例如以下：
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
（二）放在styleSheet樣式表的寫法例如以下：
@media only screen and (max-device-width:480px){/*css樣式*/}
【注意事項】：上面的兩種寫法都是針對老版iphone的解決方式（320x480的解決方式）。當然，不是說讓你兩個都用，
僅僅要挑選適合你需求的那個寫法來用就能夠了 。
利用媒體查詢來覆蓋CSS樣式
這個使用方法在行動裝置上和經常使用，主要是用來呈現高清圖的。也就是說，如今我們有一張兩倍於顯示尺寸的圖片，但可顯示的地區僅僅有圖片的一半。解決方案就是利用上面說的媒體查詢和background-size來實現。
以下主要介紹以下的幾種裝置的解決方式：
（一）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樣式*/}
（二）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]-->
結語：
行動裝置上寫css是非常複雜多變的，這個不容質疑。由於有非常多陷阱：沒有什麼非常好的調試工具、迅速擴張的市場和需求的高速變化，不同裝置上的支援程度不同都大大的添加了行動裝置上開發的難度。
行動裝置上的媒體查詢 CSS media queries for mobile device
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
