我寫(xiě)在vue的html中
function setRem () { let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth; //檢測(cè)html的屏幕寬度和body的屏幕寬度 document.documentElement.style.fontSize= htmlWidth/7.5 + 'px'; //設(shè)置font-size在750屏幕下的尺寸為100px,這樣轉(zhuǎn)換的rem可以一目了然之前是多少px的。開(kāi)發(fā)屏幕尺寸自己選,3.2的320屏幕寬也可以。 } setRem(); window.onresize = function () { //瀏覽器尺寸變化進(jìn)行觸發(fā)window.onresize函數(shù),然后觸發(fā)函數(shù)setRem() setRem() }
-然后在 .postcssrc.js 中進(jìn)行 postcss-pxtorem 配置( .postcssrc.js是腳手架自動(dòng)生成文件。配置完,要重新npm run dev 運(yùn)行 ):
紅圈內(nèi)的需要配置的,剩下的是自帶的 :
'postcss-pxtorem': { rootValue: 100, //根元素大小設(shè)置,也就是html的font-size大小 unitPrecision: 5, //保留rem小數(shù)點(diǎn)多少位 propList: ['*'], // 是一個(gè)存儲(chǔ)哪些將被轉(zhuǎn)換的屬性列表,這里設(shè)置為['*']全部,假設(shè)需要僅對(duì)邊框進(jìn)行設(shè)置,可以寫(xiě)['*', '!border*'] selectorBlackList: ['.radius'], //則是一個(gè)對(duì)css選擇器進(jìn)行過(guò)濾的數(shù)組,比如你設(shè)置為['fs'],那例如fs-xl類名,里面有關(guān)px的樣式將不被轉(zhuǎn)換,這里也支持正則寫(xiě)法。 replace: true, //這個(gè)真不知到干嘛用的。有知道的告訴我一下 mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效 minPixelValue: 12 //px小于12的不會(huì)被轉(zhuǎn)換 }
配置完了可以重新運(yùn)行了npm run dev
200px的寬高
200px變成2rem 配置的100px為font-size。rootValue為100
設(shè)置class名為radius的樣式不被轉(zhuǎn)換
總結(jié)
以上所述是小編給大家介紹的移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
新聞熱點(diǎn)
疑難解答
圖片精選