移動端適配方案有很多種，都各有千秋，這裡我只介紹vw+rem適配方案
先簡單粗暴上方案：
1、設定meta
2、ui設計稿尺寸html
html設計稿375
現在來分別解釋下這麼做的原理
1、meta這樣設定是為了保證頁面沒有縮放且根據裝置寬度自適應
2、vw是css3新出的視口單位，1vw就是視口寬度的1%
我們都知道rem是相對於根元素的，所以我們可以動態的修改html的font-size來實現適配
（1）100/設計稿尺寸 ：就是計算出1px等於多少vw
（2）然後將（1）計算的數值再乘以100，
相當於100px用多少vw來表示，
根元素的font-size設定為100px那麼相應的子元素就都需要除100才是正常顯示值，
將html font-size設定為100倍，是因為100之間換算比較容易，當然可以是任何數值，
但需要注意的是瀏覽器font-size最小值為12px小於的都會被預設置為12px
（chrom是11.32），
所以根元素的字型換算出來不能小於12px
3、最後，想要讓pc也友好的顯示可以通過**查詢直接將html 字型設定為100px 或者200px
vue vant移動端適配vw rem
我的目錄結構是 assets scripts ulitsconst ulits if u.indexof iphone 1 if u.indexof windows phone 1 if deviceid return deviceid export default ulitsimport ulit...
css3vw適配 使用vw rem實現移動端適配
利用視口單位實現適配布局 響應式布局的實現依靠 查詢 media queries 來實現，選取主流裝置寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流裝置尺寸下呈現完美適配。即使使用rem方式來布局，也需要寫一段js 來動態改變根元素的大小。比較成熟的做法如手淘的...
利用vw rem實現移動web適配布局
px css pixels em ex,ch remvw,vh 百分比mdn 那麼什麼是裝置的物理畫素？ppi pixel per inch 公式 w 橫向pixel h 縱向pixel inch 螢幕尺寸 ppi math.sqrt w w h h inch console.log math.ce...