簡單介紹一下rem和px的換算關係：1rem=html的font-size。
在專案中，我採用postcss-pxtorem+amfe-flexible，
vant是基於375px的。
安裝：npm i amfe-flexible
npm i postcss-pxtorem -d
amfe-flexible作用
其實這個外掛程式就是乙個js指令碼，它會監聽專案執行環境的螢幕尺寸，然後給html設定乙個font-size。
比如：375px的尺寸，它會幫我們給html設定font-size為37.5px。如果換成iphone5，就為32px。
postcss-pxtorem的作用
幫助我們將單位轉化為rem，這個需要在專案中做乙個配置，設定乙個基準值，比如37.5，那麼，我們在頁面中設定font-size：16px，它會自動計算成rem，16/37.5=0.42667rem。使得font-size:0.42667rem。它不需要安裝在執行時依賴環境裡面，只需要安裝在開發環境依賴裡面，因為我們在專案打包之後它已經自動將我們所有的px單位轉成rem。最終，我們的專案跑到不同的手機螢幕下，這個font-size都是0.42677rem。而我們rem的換算關係是跟html的font-size掛鉤的，也就是說，0.42667html的font-size，比如：0.4266737.5=16px。也就是我們在375px螢幕中想要的字型大小，如果是320px的，字型會隨著html的ont-size變化，這樣使用者看到的內容才是正常的，不然寫死尺寸，賊難看。
具體的**如下：
postcss-pxtorem的使用方法
在專案的根路徑新建乙個postcss.config.js的檔案
module.exports =
,'postcss-pxtorem':,
},};
在專案的入口檔案main.js中引入即可
import
'amfe-flexible'
vue vant移動端專案
先檢視本機有沒有安裝nodejs win r 進入控制台 輸入 node v 檢視 node版本資訊 如果有版本號，則說明已安裝，否則需安裝 nodejs 再安裝vue cli 如果有就不用再安裝了 npm install g vue cli通過傳統方式建立專案 步驟一 方式一 在專案資料夾下按sh...
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...
Vue vant移動端處理彈窗不能滑動問題
自己在做專案開發時，使用vantui元件，在專案中遇到了彈窗元件裡面當內容過多時，會出現滾動卡頓或者不能滾動問題，開始一直以為是自己的樣式寫的有問題，檢查下來才發現並不是，而是彈窗元件的問題，於是找到了一下解放方式。分析原因 可能就是vantui元件版本太低了，低版本元件的問題。解決方法 公升級版本...