vue 自适应

前提

制作网页时，通常会要求适应各种的屏幕尺寸。因此就要求写出来的前端页面是能够自适应的。

目前有许多的前端库是支持响应式布局的，比如 bootstrap、element-ui 等组件库。

阿里也提供了一套自适应布局方案，就是 lib-flexible。将 px 转为 rem。

依赖

首先需要安装 vue-cli 脚手架，这里我安装的是 cli3。

项目初始化完成后，在项目目录中安装 lib-flexible 和 px2rem-loader。

1. npm i lib-flexible -S

2. npm i px2rem-loader -D

接着在项目入口文件 main.js 中引入 lib-flexible

import'lib-flexible/flexible.js'

配置

在实际开发中得到的设计稿都是 px 单位的，如果手动将 px 转为 rem ，显然是一件较为麻烦的事情，因此可以通过一些工具来帮助我们实现。

vue-cli3 因为减少了对于 webpack 的配置，因此有些文件就被隐藏起来了。可以在文件的根目录下新建一个 vue.config.js 文件，在这个文件里就可以自己增加或修改一些 webpack 配置。

首先添加一个新的 Loader，vue-cli 的文档中也写的非常清楚了，需要在文件中添加一下代码

module.exports = {

    chainWebpack: config => {

      config.module

        .rule('css')

        .test(/\.css$/)

        .oneOf('vue')

        .resourceQuery(/\?vue/)

        .use('px2rem')

        .loader('px2rem-loader')

        .options({

          remUnit: 128   //代表的是 1rem = ？px  这里假设设计稿是 1920px ，那么这里的比例就是 1/10

        })

        .end()

    }

  }

此时重启服务器就生效以上配置了。但还是存在一些问题，虽然可以转换为 rem 了，但是计算出来的比例确实 1rem = 54px，这是因为 flexible.js 文件会默认写死了一个比例，我们需要作出一些修改。

    function refreshRem(){

        var width = docEl.getBoundingClientRect().width;

        if (width / dpr > 540) {

            // width = 540 * dpr;  这边是写死的

            width = width * dpr;

        }

        var rem = width / 10;

        docEl.style.fontSize = rem + 'px';

        flexible.rem = win.rem = rem;

    }