vue 移動端適配 兩種方案

2021-10-07 04:17:15 字數 506 閱讀 1211

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 技術完成頁面在各個手機尺寸上的顯示 手...