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移动端适配方案