您好,登錄后才能下訂單哦!
小編給大家分享一下移動端適配如何使px自動轉(zhuǎn)換rem,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
先安裝postcss-pxtorem: npm install postcss-pxtorem --save-dev 進行安裝
通過屏幕的變化,設(shè)置動態(tài)根元素 font-size :
我寫在vue的html中
function setRem () { let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth; //檢測html的屏幕寬度和body的屏幕寬度 document.documentElement.style.fontSize= htmlWidth/7.5 + 'px'; //設(shè)置font-size在750屏幕下的尺寸為100px,這樣轉(zhuǎn)換的rem可以一目了然之前是多少px的。開發(fā)屏幕尺寸自己選,3.2的320屏幕寬也可以。 } setRem(); window.onresize = function () { //瀏覽器尺寸變化進行觸發(fā)window.onresize函數(shù),然后觸發(fā)函數(shù)setRem() setRem() }
-然后在 .postcssrc.js 中進行 postcss-pxtorem 配置( .postcssrc.js是腳手架自動生成文件。配置完,要重新npm run dev 運行 ):
紅圈內(nèi)的需要配置的,剩下的是自帶的 :
'postcss-pxtorem': { rootValue: 100, //根元素大小設(shè)置,也就是html的font-size大小 unitPrecision: 5, //保留rem小數(shù)點多少位 propList: ['*'], // 是一個存儲哪些將被轉(zhuǎn)換的屬性列表,這里設(shè)置為['*']全部,假設(shè)需要僅對邊框進行設(shè)置,可以寫['*', '!border*'] selectorBlackList: ['.radius'], //則是一個對css選擇器進行過濾的數(shù)組,比如你設(shè)置為['fs'],那例如fs-xl類名,里面有關(guān)px的樣式將不被轉(zhuǎn)換,這里也支持正則寫法。 replace: true, //這個真不知到干嘛用的。有知道的告訴我一下 mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效 minPixelValue: 12 //px小于12的不會被轉(zhuǎn)換 }
配置完了可以重新運行了npm run dev
200px的寬高
200px變成2rem 配置的100px為font-size。rootValue為100
設(shè)置class名為radius的樣式不被轉(zhuǎn)換
以上是“移動端適配如何使px自動轉(zhuǎn)換rem”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。