vue 移动端布局字体自适应
- 安装插件
//根节点会根据页面视口变化而变化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引入
//自适应不同分辨率
import 'lib-flexible-computer'
- 在vue.config.js中配置
module.exports = {devServer: {},css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('postcss-pxtorem')({rootValue: 120, // 换算的基数 屏幕宽度/10propList: ['*'],// 需要转换的属性，*表示所有属性都需要转换})]}}}}
};
-
配置完之后如果报错 node.getIterator is not a function
使用 postcss-px2rem-exclude 会出现该错误 -
解决方法
// 卸载npm uninstall postcss-px2rem-exclude//重新安装npm install postcss-pxtorem@6.0.0
- 搞定！亲测有效！
)
)
