vue cli3.0 使用rem适配不同设备

内容摘要：https://github.com/amfe/article/issues/17

CSS单位rem

rem就是相对于根元素的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。

在vue中使用

1.安装lib-flexible插件

npm i --save-dev lib-flexible

2.在main.js里引入

import 'lib-flexible'

4.安装postcss-px2rem插件

npm i --save-dev postcss-px2rem

3.在vue.config.js中配置

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 37.5
                    })
                ]
            }
        }
    }
}

4.在vue文件的样式里写px单位，在浏览器运行会自动转换为rem单位