### 頁面寬度
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、
- 序
- 開發自己的博客
- 面試集合
- 基礎
- 1、JavaScript
- js技巧
- 2、CSS
- position之absolute
- em與rem
- inline-block
- background
- 圓角、透明度、漸變
- 關于css中的0和none
- css display:none小結
- z-index小結
- 理解滾動條
- 有關@font-face的問題
- 3、HTML
- URI中依賴協議的URL
- 4、MySQL
- limit使用
- 5、jQuery
- 6、移動Web開發
- 設計稿與分辨率
- 字體
- 圖片的自適應
- 7、前端布局bug問題(!<=IE8)
- SEO與頁面結構
- seo
- vsphere 虛擬服務器
- 代碼里的彩蛋(神注釋)
- 玩轉HTML5移動頁面
- 知識梳理
- JS 鍵盤碼
- 其他資源記錄
- temp
- TODO
- 簡單有趣的庫??
- xx