### 頁面寬度 PC上：目前絕大多數顯示器都支持 1024 x 768 及其以上分辨率，480太窄，1920則太寬（太寬也不利于閱讀），因此960就成為網頁柵格系統中的最佳寬度了。 手機端： ~~~ body.an{ width:100%; min-width:320px; max-width:640px; margin:0 auto; background:#eee } ~~~ ### 4、device-aspect-ratio ~~~ device-aspect-ratio：<ratio> ~~~ 說明：定義輸出設備的屏幕可見寬度與高度的比率。 如常講的顯示器屏幕比率：4/3, 16/9, 16/10 本特性接受min和max前綴，因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio兩個媒體特性。 簡單列舉幾個應用示例： ~~~ @media screen and (device-aspect-ratio:4/3){ … } @import url(example.css) screen and (min-device-aspect-ratio:4/3); ~~~ ### 5、通用名詞 (1) 通用名詞 屏幕尺寸(screen size): 按照屏幕的對角線測量的實際大小; --屏幕尺寸分類: 屏幕尺寸分為 小(small), 普通(normal), 大(large), 超大(extra large) 四種; --自動渲染 : Android SDK根據屏幕實際尺寸, 選擇一種方式(四選一)對布局進行渲染, 這是人為不可控的, 對程序員透明; 屏幕尺寸界線 : 屏幕的尺寸是按照dp計算的, dp越大, 尺寸越大; --small(小屏) : 最少 320dp * 426dp; --normal(普通) : 最少 320dp * 470dp; --large(大屏) : 最少 480dp * 640dp; --xlarge(超大) : 最少 720dp * 960dp; 屏幕長寬比(aspect ratio) : 手機屏幕物理寬度和物理高度比例關系, 程序中可以為指定長寬比屏幕提供布局資源; 屏幕分辨率(resolution) : 屏幕上顯示的物理像素總和, 如 320 * 480; --注意 : 分辨率不等于屏幕寬高比, 在Android程序中盡量避免直接使用px; 像素(px) : 實際的分辨率, 例如在 320 * 480分辨率手機上, 320 和 480 就是像素點; 分辨率(px)與設備獨立像素(dip)比較: dip越大, 屏幕的尺寸越大, 分辨率越高, 越清晰, 屏幕大分辨率不一定大, 如電腦; (2) Android設備相關名詞 密度(density) : 在物理寬高范圍內顯示的像素數量, 同樣屏幕大小的手機, 低密度顯示的像素點少, 高密度顯示的像素點多; -- 資源分類 :固定像素寬高的UI資源(圖片資源的寬高是按照像素確定的), 在低密度顯得很大, 在高密度顯示的很小, 因此為了使UI組件顯示大致統一(不是絕對), 美工需要一種資源設置成4份不同像素的資源, 放到對應目錄中去; **設備獨立像素(dip/dp)**: 該像素與設備硬件有關, 不同的設備顯示效果不同, 與 實際密度 和 像素 無關; -- 密度(dpi)無關 : 密度是每英寸包含像素個數, dip是基于屏幕物理密度的抽象單位; -- dip與px等效情況 : 在密度為160dip的屏幕上, 1dip == 1px,320*480分辨率手機 寬2英寸 高3英寸, 那么手機密度為160dpi; -- 屏幕不變分辨率改變 : 如果上面 2 * 3 英寸屏幕不變, 分辨率改成 480 * 800 分辨率, 這時每英寸的像素數量明顯增加了, 即密度增加, 為240dpi, 2英寸有480像素; 屏幕不變的前提下 , 如果在160pi下100dip像素的實際長度 與 240dip下 100dip像素的實際長度是一樣的; -- 實際尺寸計算 : view組件使用dip作為單位, 如果在160dpi下直接按照像素點畫出, 如果密度不是160dpi, 那么會計算一個轉換比例, 這個比例與實際尺寸相乘得到新的像素點個數; -- 計算公式: px = dip * density / 160; 當密度為160的時候, 屏幕的 px == dip; -- Google建議: 在布局文件設置組件屬性的時候, 盡量使用dip作為單位, 字體大小統一使用 sp 作為單位; px與dip區別: 下面的情況是以屏幕尺寸不變為前提的; -- px繪圖 : 在320像素寬的手機上, 100px的長度 是 480寬度像素手機上長度的 2/3; -- dip繪圖 : 屏幕大小不變的情況下, 100dip 在320 480 像素手機上實際尺寸長度是一樣的; px與dip, px與sp之間轉化工具類 : (3) 獲取密度相關方法示例 1. 真實密度(像素計算)和歸一化密度(物理長度計算) px與dp換算公式 : px = dip * density / 160; 計算像素點使用的是歸一化密度, 計算實際尺寸使用的是精確的物理密度; 真實密度 : 每英寸含有的像素點數, 拿我使用的三星GT-N8000為例, 水平方向上的真實密度為 每英寸149.82像素, 垂直方向上的真實密度為 每英寸150.51像素; -- 運算不按照該方式 : 按照該密度計算 1280dp對應的是 1280 * 149.82 / 160 = 1198.4 個像素; 舉例 : 給一個Textview控件設置1280dp的寬度, 然后可以看到該組件橫向沾滿寬度, 按照實際運算該1280dp對應的是1198個像素, 是無法占滿整個屏幕的; XML布局文件 : ### 6、分辨率 分辨率（resolution，港臺稱之為解釋度）就是屏幕圖像的精密度，是指顯示器所能顯示的像素的多少。由于屏幕上的點、線和面都是由像素組成的，顯示器可顯示的像素越多，畫面就越精細，同樣的屏幕區域內能顯示的信息也越多，所以分辨率是個非常重要的性能指標之一。可以把整個圖像想象成是一個大型的棋盤，而分辨率的表示方式就是所有經線和緯線交叉點的數目。 以分辨率為1024×768的屏幕來說，即每一條水平線上包含有1024個像素點，共有768條線，即掃描列數為1024列，行數為768行。分辨率不僅與顯示尺寸有關，還受顯像管點距、視頻帶寬等因素的影響。其中，它和刷新頻率的關系比較密切，嚴格地說，只有當刷新頻率為“無閃爍刷新頻率”，顯示器能達到最高多少分辨率，才能稱這個顯示器的最高分辨率為多少。 分辨率不能代表屏幕的大小，同樣大小的屏幕最高分辨率越高，其清晰度就越高 ### 9、移動設備的媒體查詢 ~~~ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } ~~~ ### 10、max(min)-device-width和max(min)-width的區別 在網頁自適應設計中，max-device-width和max-width是不可缺少的兩大CSS屬性，但是可能大家在使用的選擇上沒有太多講究，認為用其中一個即可。確實，如果沒有特定要求，用任何一個都沒有什么問題，不過如果你對此兩個屬性有了充分的認識之后，你或許把網頁的自適應設計得更為極致一些。 max-device-width和max-width是有區別的，表現在如下幾個方面： 1、max-device-width是設備整個顯示區域的寬度，例如，真實的設備屏幕寬度。 2、max-width是目標顯示區域的寬度，例如，瀏覽器寬度。 3、如果使用max-device-width，那么在PC瀏覽器上瀏覽網頁時，縮小或放大瀏覽器時是不執行CSS的，因為“PC設備”沒有變化。但如果使用max-width，縮小或放大瀏覽器時是執行CSS的，因為“顯示區域”即瀏覽器大小發生了變化。 4、如果使用max-device-width，那么當手機由豎變橫時，CSS是不執行的，因為“手機寬度”并沒有變化。如果使用max-width，那么當手機由豎變橫時，CSS是執行的，因為“顯示區域”發生了變化。 5、通常，面向“移動設備”用戶使用max-device-width；面向“PC設備”用戶使用max-width。 通過這樣解釋，你應該對max-device-width和max-width的區別和使用有所了解了吧。 看看下面的寫法 ~~~ /* #### mobile devices #### */ @media screen and (max-device-width: 480px){ /* CSS 代碼 (xee:PC端不生效)*/ } /* #### PC #### */ @media screen and (max-width: 1024px){ /* CSS 代碼 (xee:PC端生效)*/ } /*#### PC & mobile devices #### for 720 px width screen */ @media only screen and (max-device-width:720px),only screen and (max-width:720px){ body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:30px;} } ~~~ min-device-width和min-width的區別，跟max-device-width和max-width的區別是一樣的。 ### 11、 ### 12、