vant移动端rem适配

最新推荐文章于 2024-04-17 09:43:49 发布

糯米甜甜欣

最新推荐文章于 2024-04-17 09:43:49 发布

阅读量222

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_46163107/article/details/121074316

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vant官网截图
在这里插入图片描述

npm i amfe-flexible
npm install postcss-pxtorem -D

postcss.config.js默认配置👇
在这里插入图片描述

要把 browsers 选项写到 package.json 或 .browserlistrc 文件中。不然会有警告

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:
大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。

但是 Vant 为 37.5

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};