前提

制作網(wǎng)頁時(shí)，通常會(huì)要求適應(yīng)各種的屏幕尺寸。因此就要求寫出來的前端頁面是能夠自適應(yīng)的。

目前有許多的前端庫是支持響應(yīng)式布局的，比如 bootstrap、element-ui 等組件庫。
阿里也提供了一套自適應(yīng)布局方案，就是 lib-flexible。將 px 轉(zhuǎn)為 rem。

依賴

首先需要安裝 vue-cli 腳手架，這里我安裝的是 cli3。
項(xiàng)目初始化完成后，在項(xiàng)目目錄中安裝 lib-flexible 和 px2rem-loader。

1.  npm i lib-flexible -S
2.  npm i px2rem-loader -D

接著在項(xiàng)目入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible.js'

配置

在實(shí)際開發(fā)中得到的設(shè)計(jì)稿都是 px 單位的，如果手動(dòng)將 px 轉(zhuǎn)為 rem ，顯然是一件較為麻煩的事情，因此可以通過一些工具來幫助我們實(shí)現(xiàn)。

vue-cli3 因?yàn)闇p少了對(duì)于 webpack 的配置，因此有些文件就被隱藏起來了?？梢栽谖募母夸浵滦陆ㄒ粋€(gè) vue.config.js 文件，在這個(gè)文件里就可以自己增加或修改一些 webpack 配置。

首先添加一個(gè)新的 Loader，vue-cli 的文檔中也寫的非常清楚了，需要在文件中添加一下代碼

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192   //代表的是 1rem = ？px  這里假設(shè)設(shè)計(jì)稿是 1920px ，那么這里的比例就是 1/10
      })
      .end()
  }
}

此時(shí)重啟服務(wù)器就生效以上配置了。但還是存在一些問題，雖然可以轉(zhuǎn)換為 rem 了，但是計(jì)算出來的比例確實(shí) 1rem = 54px，這是因?yàn)?flexible.js 文件會(huì)默認(rèn)寫死了一個(gè)比例，我們需要作出一些修改。

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ā)愉快 ~