基於vue-cli配置手淘的lib-flexible + rem，實現移動端自適應

沒接觸過flexible的建議先看看大漠的這篇文章這樣你纔會知道長度爲何用rem，而字體要用px

安裝flexible

npm install lib-flexible --save

引入flexible

在項目入口文件main.js中添加以下代碼，引入flexible

import 'lib-flexible'

px 轉 rem

使用 webpack 的 px2rem-loader,自動將px轉換爲rem

安裝px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到如下文件 build/utils.js,將px2rem-loader添加到cssLoaders中，如：

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    sourceMap: options.sourceMap
  }
}

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 37.5 // 設計稿的1/10,這裏假設設計稿是 375px
  }
}

關於importLoaders：如如有疑問，請參考webpack深刻與實戰4-4
2017.12.8更新說明：是否須要配置importLoaders，可參考最底部的說明。

同時，在generateLoaders方法中添加px2remLoader：

function generateLoaders (loader, loaderOptions) {
  // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

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

  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
}

px2rem 用法

安裝px2rem後，再使用px上有些不一樣，你們能夠參考px2rem官方介紹，下面簡單介紹一下。

直接寫px，編譯後會直接轉化成rem ---- 除開下面兩種狀況，其餘長度用這個
在px後面添加/*no*/，不會轉化px，會原樣輸出。 --- 通常border需用這個
在px後面添加/*px*/,會根據dpr的不一樣，生成三套代碼。---- 通常字體需用這個

示例代碼
編譯前（本身寫的代碼）

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

編譯後（打包後的代碼）

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

重啓項目，就能夠愉快的用設計稿上的px了。

注意：坑

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

更新：對外部引入css，px2rem能不能轉換rem問題

2017.12.8更新：在實際運用中發現對於外部引入的css文件，有時候px2rem能正常轉換，有時候又不能轉換，究竟是什麼緣由呢？試驗了三種不一樣的css引入狀況，發現第一種能正常轉換，二三不能正常轉換，至於緣由，因爲才疏學淺，仍是不懂，求大神解答三種引入方式的區別。

若是明白了這些方法，就不必再配置cssLoader的importLoaders了，由於下面的方法更容易控制外部引入的css是否須要轉rem，而更改importLoaders就控制不了了，它會強制轉換。

<style src='../assets/style.css'>
 /* px2rem能正常轉換 */
</style>

<style>
  /* px2rem不能正常轉換 */
  @import '../assets/style.css';
</style>

<style>
  /* px2rem不能正常轉換 */
  @import url('../assets/style.css');

</style>

 轉發自：http://www.javashuo.com/article/p-rzbwzqzg-eu.html