移動端專案可以用postcss-pxtorem外掛將px轉換為rem單位

1. npm ipostcss-pxtorem -D // 安裝

2. 修改配置檔案 postcss.config.js

module.exports={ plugins:{ 'autoprefixer':{ browsers:['Android>=4.0','iOS>=7'] }, 'postcss-pxtorem':{ rootValue:16,//結果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成20rem propList:['*'] } } }

3. main.js 新增對根元素字型的大小設定，來達到適配多倍圖的效果

functionsetRem(){ //320預設大小16px;320px=20rem;每個元素px基礎上/16 consthtmlWidth=document.documentElement.clientWidth||document.body.clientWidth //得到html的Dom元素 consthtmlDom=document.getElementsByTagName('html')[0] //設定根元素字型大小 htmlDom.style.fontSize=(htmlWidth/20)+'px' } //初始化 setRem() //改變視窗大小時重新設定rem window.onresize=function(){ setRem() }