Vue 使用 rem布局

1、rem布局需要安装两个插件

npm i lib-flexible -S
npm i postcss-pxtorem@5.1.1 -D

最新版本postcss-pxtorem需要POSTSS 8，安装老版本可用

lib-flexible: 根据移动端屏幕大小而对应改变html的fontSize
postcss-pxtorem： 根据html的fontSize将px单位改变为rem单位

有了以上两个插件，就可以直接在css中写px单位，项目在渲染时会自动帮我们把写的px单位转换为rem单位。这里用的是750px的设计稿。

2、项目中创建postcss.config.js用来配置postcss-pxtorem插件

module.exports = {plugins: {"postcss-pxtorem": {rootValue:75,propList:['*'],exclude: /(node_modules)|(folder_name)/i}}}

3、修改lib-flexible源代码，让其调整的最大宽度为750px

4、在main.js中引用lib-flexible，并设置文字为px单位

import 'lib-flexible'

h1 {font-size: 40px;}

5、运行演示GIF