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: ['*'],
    },
  },
};
重启服务,刷新页面就可看见效果

上一篇:vite安装postcss-pxtorem+amfe-flexible(记录成功安装的一次~~~)


下一篇:vue3.0+vite+ts项目搭建-postcss-pxtorem 实现移动自适应(五)