###螢幕尺寸
嚴格來說，螢幕尺寸實際被物理尺寸和顯示解析度兩個部分定義。
而我們今天對各類手機、pad 裝置所說的螢幕尺寸，只指物理尺寸。
如果一塊手機螢幕的物理尺寸是 5.5 英吋，即是指該手機螢幕對角線的長度。
###螢幕解析度
螢幕解析度是指螢幕影象的精密度，是顯示器所能顯示的畫素的具體數值。
如乙個手機標稱解析度是 720 x 1280，即表示螢幕橫向由 720 個畫素點組成，縱向由 1280 個畫素點組成。
由於螢幕上的點、線和面都是由畫素組成的，螢幕具備的畫素點越多，畫面就越精細。
解析度越高，單位面積內顯示的資訊就越多，我們能看到的內容就越多。
###螢幕比例
螢幕比例是指螢幕的寬度與高度的比例，今天更多指解析度的比例，即
螢幕比例 = 螢幕橫向解析度 / 螢幕縱向解析度
dpi（dots per inch），每英吋所擁有的點數，原用於印表機、滑鼠的精確度指標。
在螢幕方面一般使用 ppi 來表示精度。
###ppi
ppi（pixels per inch），每英吋所擁有的畫素數，螢幕的 ppi 越高，表示螢幕中的每個畫素點之間的距離越接近，畫素的密度越高，這樣螢幕內容看起來就更加細膩、真實。
而當 ppi 超過 300 時，螢幕被認為達到了視網膜級別，一般情況下人眼已經較難察覺 300 以上 ppi 之間的差別。
計算公式：
以 iphone 6 plus 為例，螢幕解析度 1080 x 1920，螢幕尺寸 5.5 英吋
ppi = √(1920 ^ 2 + 1080 ^ 2) / 5.5 = 400.5285…… ≈ 400
###螢幕密度（density）
density 由 android 1.6 版本（android api level 4）為了適配不同大小的螢幕而提出，表示每英吋有多少個顯示點(邏輯值)，它的單位是 dpi。
在 android 原生開發中，常常使用 dp/dip/sp 等單位來定義檢視、文字的寬高
理論上當 density 的值為 160 dpi 時，1px = 1dp，當前螢幕的 density 為 320 dpi 時，2px = 1dp
在這裡為開發者提供一張簡單的**，記錄了幾種主流 android 手機的 density 值。
螢幕解析度
螢幕密度（density）
後來在 iphone 4 中，同樣大小（3.5 inch）的螢幕採用了 retina 顯示技術，橫、縱向方向畫素密度都被放大到2倍，畫素解析度提高到 (320 x 2) x (480 x 2) = 640 x 960（ppi = 326）， 顯像解析度提公升至 iphone 3gs 的 4 倍（1 個 point 被渲染成 1 個 2 x 2 的畫素矩陣）。
但是對於開發者來說，ios 繪製圖形的 api 依然沿襲 point（pt，注意區分印刷行業的「磅」）為單位。在同樣的邏輯座標系下（320 x 480）：
1 point = scale x pixel
在 iphone 4 ~ 6 中，縮放因子 scale = 2；在 iphone 6 plus 中，縮放因子 scale = 3，可以理解為：
scale = 絕對長度比（point / pixel）= 單位長度內的數量比（pixel / point）
其中 iphone 6 plus 的 scale = 3 只是為了書寫方便，實際會在渲染時被 ios 系統轉換，除以 1.15，變為 2.608 倍左右
在這裡為開發者提供一張簡單的**，記錄了幾種主流 iphone 手機的 scalefactor 值。
###邏輯解析度
邏輯解析度在 apicloud 應用中也可以被當做顯示解析度使用。
邏輯解析度與螢幕解析度在當今的主流裝置中是不相同的，公式為：
邏輯解析度 = 螢幕解析度 / 螢幕倍率
在 android 系統中，根據 dp 的定義 1dp = 1px 時， density 為 160，可知公式為：
android 螢幕倍率 = density / 160如 iphone 4 的螢幕解析度為 640 x 960，邏輯解析度為：
640 / 2 x 960 / 2 = 320 x 480而小公尺 2 的螢幕解析度為 720 x 1280，density 為 320，邏輯解析度為：
720 / (320 / 160) x 1280 / (320 / 160) = 360 x 640###推薦 ui 尺寸
考慮到螢幕比例、實際換算難度等因素，推薦您選擇720 x 1280解析度為標準製作 ui 設計圖。
###量圖標準
###彈性盒子
當絕對計量和相對計量均無法輕易實現所需布局時，可以考慮使用彈性盒子（flex、box）
由於 ios 和 android 系統瀏覽器都使用-webkit-標準，彈性盒子樣式只需要適配-webkit-即可
box-sizing
我們還可以利用樣式屬性 position 來實現特殊布局，將元素指定為 position:relation 或 position:absolute，同時結合樣式屬性 box-sizing 改變盒子計算方式並指定具體的padding 值完成布局
###viewport
螢幕適配原理
為什麼需要螢幕適配？android機型碎片化嚴重 各種機型解析度的手機都有 解析度太多，為了ui美觀，良好的使用者體驗 所以螢幕適配 布局適配 布局適配 1.dp,px,sp,相對布局，權重，matchparent,dp dip 在螢幕密度是160ppi的時候 1dp 1px px 畫素 構成影象的...
android螢幕適配原理
android裝置碎片化非常嚴重，如圖，每個小色塊代表一種裝置解析度 各種解析度的裝置要想全部完美適配是不可能的，那麼就可以理解，如上幾個資料夾劃分了一部分區間，拿過來乙個機器，它的畫素密度引數接近哪個就用哪個資料夾的 做測試 heightpixels widthpixels density den...
Bootstrap環境及螢幕適配 （一）
需要引用的檔案有，jquery.js bootstrap.min.js和bootstrap.min.css檔案 結果 為了讓 bootstrap 開發的 對移動裝置友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中新增viewport meta標籤，如下所示 name viewport c...