vue-屏幕適配方案

一，PC端適配

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

利用webpack配置px2rem-loader和lib-flexible來實現px轉化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轉rem配置（需要將px2remloader添加進loaders數組中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192  //根據視覺稿，rem為px的十分之一，1920px  192 rem
      // remPrecision: 8//換算的rem保留幾位小數點
    }
  }

並放進generateLoaders函數的 loaders 數組中

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

　

vue-cli3 因為減少了對於 webpack 的配置，因此有些文件就被隱藏起來了。可以在文件的根目錄下 vue.config.js 文件增加或修改一些 webpack 配置。

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

config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({ remUnit: 192 })
      .end()

　　

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;
  }

　　

此時，放大縮小瀏覽器窗口發現里面的內容也按比例縮放了

注意：

  以上實現轉換適用於：

（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）元素內部樣式：style=”height: 417px; width: 550px;”

二，移動端適配

1，px2rem-loader和lib-flexible

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

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