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

最新推荐文章于 2024-05-06 18:14:57 发布

Ich Lieb' Dich immer

最新推荐文章于 2024-05-06 18:14:57 发布

阅读量607

点赞数 1

文章标签： vue html5 前端

本文链接：https://blog.csdn.net/ichLiebDich/article/details/105835402

版权

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

Rem 适配

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

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

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

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

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

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