目前移動端適配有三種方法：
1、 固定寬度，高度自適應（配合**查詢）
這是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex。
原理這種方法使用了完美視口：
name="viewport"
content="width=device-width,initial-scale=1">
name="viewport"
content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
生成的viewport告訴瀏覽器網頁的布局視口使用 640px，然後把頁面縮放成50%，這是絕對的等比例縮放。、文字等等所有元素都被縮放在手機螢幕中。
3、rem做寬度，viewport縮放（**使用flexble實現h5終端適配）
這也是**使用的方案，根據螢幕寬度設定 rem 值，需要適配的元素都使用 rem 為單位，不需要適配的元素還是使用 px 為單位。
具體使用方法見使用flexible實現手淘h5頁面的終端適配
原理：
1>螢幕寬度設定rem的大小，給html設定font-size；
2>viewport init-scale
3>根據裝置畫素比（上篇有介紹到）
這麼設定的好處是可以讓不同裝置的rem或px都顯示一樣的長度。
設定rem
設定rem的意義在於得到乙個與螢幕寬度相關的單位，本來vw是最合適的，但是因為相容性的問題，只能使用rem來做。這樣，讓不同裝置的rem顯示一樣的長度。
vw是css3引入的單位，1vw = 1%視窗寬度
上面的布局是：
html
.btn
.a
[data-dpr="2"]
.a[data-dpr="3"]
.a
之前說過css畫素和物理畫素與縮放、dpr都有關係，這裡說明：
在普通手機上，.a字型設定為12px；
在dpr是2的手機上，[data-dpr=」2」] .a字型為24px，又因為頁面縮放50%，字型為還是12px
移動端適配
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...