標籤：android style ext color 使用 width
現在試圖解決android平板的螢幕解析度問題，目前主要想到的辦法是採用響應式設計和媒體查詢，發現無論使用那種方式，工作量都很大，調試都困難，悲催啊。
CSS的媒體查詢雖然在傳統的互連網頁面可能發揮的餘地不是很大，但是自從蘋果和安卓的風靡之後，移動平台上的web開發變得越來越流行了，同時CSS的媒體查詢可謂派上了大用場了。
以下為翻譯內容，原文來自這裡 非常棒的一篇文章
關於CSS media queries想瞭解更多，參看這裡
如何使用Media Queries媒體查詢:
媒體查詢就像是一個CSS選取器或者如果你接觸過資料庫的話，就像是SQL查詢語句。媒體查詢實際上就是一種文法規
則，可以方便的從一大堆元素裡擷取幾個元素。這樣就方便你應對一些特定的尺寸或者指定一些特殊的解決方案了。媒體
查詢的代碼可以放在<head>元素裡，也可以放在styleSheet樣式表裡的任何地方。但是需要注意的是，在任何時候，媒體查
詢都必須以關鍵字media開頭，後面跟你要顯示的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是非常複雜多變的，這個不容質疑。因為有很多陷阱：沒有什麼很好的調試工具、迅速擴張的市場和需求的快速變化，不同裝置上的支援程度不同都大大的增加了行動裝置上開發的難度。
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
