vue中實現移動端的適配
使用**團隊的 flexible實現手淘h5頁面的終端適配
使用vw結合rem實現適配
1.首先 適配的meta標籤少不了
2.設定 html -----> 使用 設計稿 100px 100px -------> 1rem 1rem
原理
a vw------>表示螢幕 1%的寬度
b 設計稿 750px
c 計算 1px == rem? -----> 100/750-------- 1px = 0.133333vw
d 設定根元素 大小 font-size:13.33333333vw 擴大 100倍,100px = 1rem
e 設計稿上所有尺寸 除以100
附上 幾個關於mate標籤的說明
vue專案移動端 pc端適配方案
vue專案移動端 pc端適配方案 npm i lib flexible s npm i postcss px2rem s簡要介紹這兩個包的用途 flexible會為頁面根據螢幕自動新增標籤,動態控制initial scale,maximum scale,minimum scale等屬性的值。post...
vue專案移動端 pc端適配方案
vue專案移動端 pc端適配方案 npm i lib flexible s npm i postcss px2rem s簡要介紹這兩個包的用途 flexible會為頁面根據螢幕自動新增標籤,動態控制initial scale,maximum scale,minimum scale等屬性的值。post...
移動端兩種布局方式
rem media less是我們移動端布局的第一種方案。移動端頁面設計稿尺寸 安卓手機尺寸 320px 360px 375px 384px 400px 414px 500px 720px 蘋果手機尺寸 640px 750px 通過less rem media 技術完成頁面在各個手機尺寸上的顯示 手...