配置flexible
1.在命令行中运行如下命令安装
npm install lib-flexible --save-dev
2.在main.js中引入lib-flexible
import "lib-flexible"; // rem适配
3.在项目根目录的 index.html 中添加如下 meta添加 meta 标签
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
配置px2rem-loader
一般我们测量的设计稿的单位是px,为了匹配不同的终端设备,我们需要适应不同的设备宽度,一般是将px转换成rem在写在样式表中。 webpack 的 loader:px2rem-loader可以自动帮我们将 px 转换成 rem。
安装px2rem-loader
npm install px2rem-loader
在vue.config.js中配置
这里的remUnit指的是你的换算基数哦,你想把设计稿分成多少个rem,即1rem=多少像素
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
// 换算基数
remUnit: 37.5
})
]
}
}
}
这样子就可以啦,你就可以愉快的写样式表咯。设计稿测量是多少你就写多少px,渲染的时候会自动转换成rem哦。