其他分享
首页 > 其他分享> > vue 移动端px适配

vue 移动端px适配

作者:互联网

1.使用lib-flexible动态设置REM基准值(html标签的字体大小)

npm i amfe-flexible
然后在main.js引入它
// rem适配
import 'amfe-flexible'

 2.使用postcss-pxtorem将px转为rem

// 指定版本安装,安装最新版本会有报错几率
npm i postcss-pxtorem@5.0.0 -D
然后在根目录下创建一个postcss.config.js文件
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      // 所有属性都会转化
      propList: ['*'],
    },
  },
};
重启服务,刷新页面就可看见效果

标签:vue,amfe,适配,px,js,flexible,postcss,pxtorem
来源: https://blog.csdn.net/lj121829/article/details/121720584