一，PC端適配

開發(fā)PC端項目，通常會要求適應各種的屏幕尺寸，并且要求瀏覽器縮小頁面等比例變化，因此就要求寫出來的前端頁面是能夠自適應的

利用webpack配置px2rem-loader和lib-flexible來實現(xiàn)px轉(zhuǎn)化rem
1、安裝
npm install px2rem-loader -D
npm install lib-flexible -S

2、在項目入口文件 main.js 里 引入 lib-flexible

import 'lib-flexible'

3、webpack配置

在項目build文件夾下的util.js中添加

// 增加代碼，px轉(zhuǎn)rem配置（需要將px2remloader添加進loaders數(shù)組中）
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 192  //根據(jù)視覺稿，rem為px的十分之一，1920px  192 rem
    // remPrecision: 8//換算的rem保留幾位小數(shù)點
  }
}

并放進generateLoaders函數(shù)的 loaders 數(shù)組中

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

4、修改flexible.js（重要，不然沒效果）

因為該適配方案主要用于移動端，從flexible.js代碼中也可以看到

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          //  width = 540 * dpr;   就是這里的問題，需要將 540 修改為 width，不將寬度寫死就ok了。
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

此時，放大縮小瀏覽器窗口發(fā)現(xiàn)里面的內(nèi)容也按比例縮放了

注意：

以上實現(xiàn)轉(zhuǎn)換適用于：

（1）組件中編寫的<style></style>下的css

（2）從index.js或者main.js中import ‘../../static/css/reset.css’引入css

（3）在組件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

另外的情況不適用：

（1）組件<style></style>中@import “../../static/css/reset.css (可考慮上面（2）、（3）的形式引入)

（2）外部樣式:<link rel=”stylesheet” href=”static/css/reset.css”>

（3）元素內(nèi)部樣式：style=”height: 417px; width: 550px;

二，移動端適配

1，px2rem-loader和lib-flexible

參考PC端適配1，2，3步驟，不需要第4步

2，其他方法→vue移動端適配方案