vue-cli3 + bootstrap3实现响应式布局

1、用px2rem配合lib-flexible，让网页适配。

lib-flexible
作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：

npm install lib-flexible

引入：入口文件main.js中：

import "lib-flexible/flexible.js"

2、手写一个js小工具，省略rem的计算，加快开发速度。
在src目录下增加一个utils目录，在里面新建一个js文件，写入以下内容：

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 750
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

在main.js中引入改js文件：

import "./utils/rem"

然后就