vue自適應(yīng)布局postcss-px2rem實(shí)例分析

這篇文章主要介紹“vue自適應(yīng)布局postcss-px2rem實(shí)例分析”，在日常操作中，相信很多人在vue自適應(yīng)布局postcss-px2rem實(shí)例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”vue自適應(yīng)布局postcss-px2rem實(shí)例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

首先，我們來了解一下lib-flexible和amfe-flexible:
lib-flexible是淘寶項(xiàng)目組開發(fā)出來的一個(gè)開源插件，會(huì)自動(dòng)在html的head中添加一個(gè)meta name="viewport"的標(biāo)簽，同時(shí)會(huì)自動(dòng)設(shè)置html的font-size為屏幕寬度除以10，也就是1rem等于html根節(jié)點(diǎn)的font-size。而amfe-flexible是lib-flexible的升級(jí)版，所以現(xiàn)在我就只使用amfe-flexible了。
與其搭配的postcss-px2rem(pxtorem）作用為把px轉(zhuǎn)變?yōu)閞em
1.下載amfe-flexible： cnpm install postcss-px2rem -S
2.下載postcss-px2rem： cnpm install postcss-px2rem -S
小tip:使用yarn下載不了

未免兼容麻煩，我這里指定了版本

3.在main.js里引入amfe-felxible

import 'amfe-flexible'

3.在vue.config.js文件里面配置postcss

我下載的vue-cli3,配置如下

module.exports = {
css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  }
}

vue-cli2配置則為

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此處為添加部分
      rootValue: 100, // 換算基數(shù)，默認(rèn)100，把根標(biāo)簽的font-size規(guī)定為1rem為50px,在設(shè)計(jì)稿上量出多少px直接在代碼中寫多少px
      unitPrecision: 5,  //保留rem小數(shù)點(diǎn)多少位
      propList: ['*', '!border', '!font-size'], //  存儲(chǔ)將被轉(zhuǎn)換的屬性列表，'!font-size' 即不對(duì)字體進(jìn)行rem轉(zhuǎn)換
      selectorBlackList: ['.radius'], // 要忽略并保留為px的選擇器，例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，支持正則寫法。
      replace: true,
      mediaQuery: false,//（布爾值）媒體查詢( @media screen 之類的)中不生效
      minPixelValue: 12,///設(shè)置要替換的最小像素值，px小于12的不會(huì)被轉(zhuǎn)換
      //propWhiteList: [],  //默認(rèn)值是一個(gè)空數(shù)組，這意味著禁用白名單并啟用所有屬性
      propBlackList: ['font-size'], //黑名單
    }
  }
}

到此，關(guān)于“vue自適應(yīng)布局postcss-px2rem實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！