在千峰逆戰班學習的第二十七天
一步乙個腳印，越努力越輕鬆，越堅強越幸運！
繼續加油，奧利給！
移動裝置螢幕尺寸不一樣，不同型號的手機會有不同大小的螢幕，不同型號的平板也是，就算是我們的pc端也是會有不同大小的螢幕；適配用來做布局的，移動端比較麻煩-裝置太多，尺寸也不一樣；而且設計師設計的尺寸 和我們切圖的尺寸也不一樣。
注：h5 頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面，在不同尺寸的手機裝置上，頁面達到合理的展示或者保持統一效果的等比縮放看起來差不太多。
手機解析度，檢視以下**：
字型寬高
間距影象
1、百分比適配
根據父級算百分比，需配合其它布局使用
根據父級的寬度絕對自己的寬度，寬度好算，高度沒法算；
所以建議：高度不變，寬度變化的時候 用 百分比；
百分比布局案例：360 等
2、viewport
在移動端 viewport 視口就是瀏覽器顯示頁面內容的螢幕區域。在 viewport 中有兩種視口，分別表示為， visual viewport（可視視口）和 layout viewport（布局視口），viewport縮放適配 把所有機型的css畫素設定成一致。
"viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">minimum-scale：允許使用者縮放到的最小比例（預設設定為 1.0） maximum-scale：允許使用者縮放到的最大比例（預設設定為 1.0） user-scalable：使用者是否可以手動縮放（預設設定為 no，因為我們不希望使用者放大縮小頁面）
設定meta標籤的目的：
讓 visual viewport（可視視口）和 layout viewport（布局視口）大小相等
裝置視窗（iphone 6 ...） 顯示內容的視窗（html 的寬）1px = 4 ppi :
1px -> css 畫素 （邏輯）
4 ppi -> 裝置畫素（物理畫素）
iphone 4 css 畫素 320 * 480
裝置畫素 640 * 960
dpr : 裝置畫素比
裝置畫素 640 * 960 / css 畫素 320 * 480
1 個 css 畫素 （px） = 4 個裝置畫素 (ppi)
寬是 2 倍的關係 — 1 個 css 畫素 的寬 = 2 個裝置畫素 的寬
高是 2 倍的關係 — 1 個 css 畫素 的高 = 2 個裝置畫素 的高
dpr = 2;(很重要)
ui 根據 裝置畫素 640 * 960
css 畫素 320 * 480
怎麼讓裝置畫素 640 * 960 內容 顯示在 css 畫素 320 * 480 的範圍內？ 裝置畫素/dpr(2)
font-size： 預設情況下是 16px = 1em = 1rem
rem : 單位 始終是相對根標籤 html 的 font-size 來顯示大小的；
em : em 的大小是根據自身或者最近的父元素的 font-size：的值來顯示的；
預設情況下： 1rem = 16px
html = font-size:100px; 1rem = html font-size:100px; 為了好計算； 注：html 的 font-size 要大於 12px；
vw 和 vh 是視口（viewport units）單位:
vw: 視口寬度 不管螢幕的解析度是多大 ，都是固定的 100vw = 當前裝置的寬
vh: 視口高度 不管螢幕的解析度是多大 ，都是固定的 100vh = 當前裝置的高
以 iphone 6 為案例： 375 * 667 ； (標準)
375px = 100% = 100vw
1vw = 1% = 3.75px
html： font-size：100px = 26.66667vw
以 iphone 4 為案例： 320 * 480 ；
移動端適配
js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...
移動端適配
不論裝置寬度是多少，統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大，都看作375px。width只能改變布局視口，不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...
移動端適配
無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...