移動端適配 使px自動轉換rem
發(fā)布時間：2019-08-26 14:24:25 作者：佚名 
我要評論
我要評論這篇文章主要介紹了移動端適配 使px自動轉換rem的相關資料,需要的朋友可以參考下
- 先安裝postcss-pxtorem： npm install postcss-pxtorem --save-dev 進行安裝
- 通過屏幕的變化，設置動態(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'; //設置font-size在750屏幕下的尺寸為100px,這樣轉換的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, //根元素大小設置，也就是html的font-size大小
unitPrecision: 5, //保留rem小數(shù)點多少位
propList: ['*'], // 是一個存儲哪些將被轉換的屬性列表，這里設置為['*']全部，假設需要僅對邊框進行設置，可以寫['*', '!border*']
selectorBlackList: ['.radius'], //則是一個對css選擇器進行過濾的數(shù)組，比如你設置為['fs']，那例如fs-xl類名，里面有關px的樣式將不被轉換，這里也支持正則寫法。
replace: true, //這個真不知到干嘛用的。有知道的告訴我一下
mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
minPixelValue: 12 //px小于12的不會被轉換
}
配置完了可以重新運行了npm run dev
200px的寬高
200px變成2rem 配置的100px為font-size。rootValue為100
設置class名為radius的樣式不被轉換
總結
以上所述是小編給大家介紹的移動端適配 使px自動轉換rem,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了吃透移動端 1px的具體用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-16
這篇文章主要介紹了postcss-pxtorem移動端適配的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2019-12-03
這篇文章主要介紹了Html5移動端適配IphoneX等機型的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2019-06-25- 這篇文章主要介紹了淺談移動端適配大法的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-05
- 這篇文章主要介紹了html5實現(xiàn)移動端適配完美寫法,需要的朋友可以參考下2017-11-16
這篇文章主要介紹了詳解如何使用rem或viewport進行移動端適配，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編2020-08-14
