vue 移动端布局字体自适应
- 安装插件
javascript
//根节点会根据页面视口变化而变化font-size大小
// 版本推荐 1.0.2
npm install lib-flexible-computer -S
//自动将px转换为rem
//版本推荐 0.1.9
npm i px2rem-loader -D
//将代码中px自动转化成对应的rem的一个插件
npm install postcss-px2rem-exclude -D
- 在main.js引入
javascript
//自适应不同分辨率
import 'lib-flexible-computer'
- 在vue.config.js中配置
javascript
module.exports = {
devServer: {},
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require('postcss-pxtorem')({
rootValue: 120, // 换算的基数 屏幕宽度/10
propList: ['*'],// 需要转换的属性,*表示所有属性都需要转换
})
]
}
}
}
}
};
-
配置完之后如果报错 node.getIterator is not a function
使用 postcss-px2rem-exclude 会出现该错误
-
解决方法
javascript
// 卸载
npm uninstall postcss-px2rem-exclude
//重新安装
npm install postcss-pxtorem@6.0.0
- 搞定!亲测有效!