移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem

- 先安裝postcss-pxtorem: npm install postcss-pxtorem --save-dev 進(jìn)行安裝
- 通過(guò)屏幕的變化,設(shè)置動(dòng)態(tài)根元素 font-size :
我寫(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類(lèi)名,里面有關(guān)px的樣式將不被轉(zhuǎn)換,這里也支持正則寫(xiě)法。 replace: true, //這個(gè)真不知到干嘛用的。有知道的告訴我一下 mediaQuery: false, //媒體查詢(xún)( @media screen 之類(lèi)的)中不生效 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)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
- 這篇文章主要介紹了吃透移動(dòng)端 1px的具體用法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-16
postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn)
這篇文章主要介紹了postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)2019-12-03Html5移動(dòng)端適配IphoneX等機(jī)型的方法
這篇文章主要介紹了Html5移動(dòng)端適配IphoneX等機(jī)型的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起2019-06-25- 這篇文章主要介紹了淺談移動(dòng)端適配大法的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-05
html5實(shí)現(xiàn)移動(dòng)端適配完美寫(xiě)法
這篇文章主要介紹了html5實(shí)現(xiàn)移動(dòng)端適配完美寫(xiě)法,需要的朋友可以參考下2017-11-16詳解如何使用rem或viewport進(jìn)行移動(dòng)端適配
這篇文章主要介紹了詳解如何使用rem或viewport進(jìn)行移動(dòng)端適配,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編2020-08-14