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

發(fā)布時間：2019-08-26 14:24:25 作者：佚名

這篇文章主要介紹了移動端適配使px自動轉(zhuǎn)換rem的相關(guān)資料,需要的朋友可以參考下

先安裝postcss-pxtorem： npm install postcss-pxtorem --save-dev 進(jìn)行安裝
通過屏幕的變化，設(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 () {   //瀏覽器尺寸變化進(jìn)行觸發(fā)window.onresize函數(shù)，然后觸發(fā)函數(shù)setRem()
        setRem()
      }

-然后在 .postcssrc.js 中進(jìn)行 postcss-pxtorem 配置（ .postcssrc.js是腳手架自動生成文件。配置完，要重新npm run dev 運(yùn)行）：

紅圈內(nèi)的需要配置的，剩下的是自帶的：

'postcss-pxtorem': {
  rootValue: 100,  //根元素大小設(shè)置，也就是html的font-size大小
  unitPrecision: 5,  //保留rem小數(shù)點(diǎn)多少位
  propList: ['*'],    //  是一個存儲哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為['*']全部，假設(shè)需要僅對邊框進(jìn)行設(shè)置，可以寫['*', '!border*']  
  selectorBlackList: ['.radius'],  //則是一個對css選擇器進(jìn)行過濾的數(shù)組，比如你設(shè)置為['fs']，那例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，這里也支持正則寫法。
  replace: true,  //這個真不知到干嘛用的。有知道的告訴我一下
  mediaQuery: false,  //媒體查詢( @media screen 之類的)中不生效
  minPixelValue: 12  //px小于12的不會被轉(zhuǎn)換

    }

配置完了可以重新運(yùn)行了npm run dev