Vue使用lib-flexible，將px轉化爲rem

1.下載lib-flexible

我使用的是vue-cli+webpack，因此是經過npm來安裝的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安裝px2rem-loader

npm install px2rem-loader

4.配置px2rem-loader

在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，將下面代碼加進cssLoaders方法中

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }

 

同時，在generateLoaders方法中添加px2remLoader

  function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader]
     
    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

五、重啓

當配置完以後，重啓下服務，px會自動轉化爲rem了

npm run dev

六、注意事項

一、不能在index.html的頭部加 name 爲 viewport 的 meta 標籤，flexible會自動爲咱們添加！

二、對css中文字樣式增長/* px */後綴，會編譯出適應不一樣dpr的字號

.text{
    font-size: 28px; /* px */
}
// 會被編譯成以下：

[data-dpr="1"] .text { // data-dpr是由flexible計算出來並加在html上的設備像素比
    font-size: 14px;
}

[data-dpr="2"] .text {
    font-size: 28px;
}

[data-dpr="3"] .text {
    font-size: 42px;
}

三、對邊框樣式增長/* no */後綴，會保持原樣

.box{
    border: 1px solid #fff; /* no */
}
// 會被編譯成以下：
.box{
    border: 1px solid #fff;
}