vant ui 为例配置rem + viewport的移动端项目

Rem 适配

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'], }, 'postcss-pxtorem': { rootValue: 37.5, //结果为：设计稿元素尺寸/37.5，比如元素宽375px,最终页面会换算成 10rem

propList: ['*'], }, }, };

vue3.0中使用postcss-pxtorem - 简书

直接新建或者在已有的postcss.config.js中加入配置

VUE中使用lib-flexible_Mr.Yuan-CSDN博客

直接在main.js 中引用