我寫在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的。開發屏幕尺寸自己選,3.2的320屏幕寬也可以。 } setRem(); window.onresize = function () { //瀏覽器尺寸變化進行觸發window.onresize函數,然后觸發函數setRem() setRem() }
-然后在 .postcssrc.js 中進行 postcss-pxtorem 配置( .postcssrc.js是腳手架自動生成文件。配置完,要重新npm run dev 運行 ):
紅圈內的需要配置的,剩下的是自帶的 :
'postcss-pxtorem': { rootValue: 100, //根元素大小設置,也就是html的font-size大小 unitPrecision: 5, //保留rem小數點多少位 propList: ['*'], // 是一個存儲哪些將被轉換的屬性列表,這里設置為['*']全部,假設需要僅對邊框進行設置,可以寫['*', '!border*'] selectorBlackList: ['.radius'], //則是一個對css選擇器進行過濾的數組,比如你設置為['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,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
新聞熱點
疑難解答