Vant组件在不同手机屏幕显示比例不对，怎么调整？

梓玥🍀 提问于 2026-01-31 23:13:24 阅读 48

组件

用Vant3写页面时，按钮和输入框在iPhone 13上显示正常，但到华为nova9上突然变小了一半，搞不懂为啥？

已经按文档设置了viewport和Config { standalone: true }，还引入了Vant的适配函数：


import { createApp } from 'vue';
import { ConfigProvider, createTransfer } from 'vant';
const app = createApp(App);
app.use(ConfigProvider);
app.config.globalProperties.$transfer = createTransfer();

但页面依然出现布局错乱，特别是底部导航栏图标在部分机型上会重叠。尝试改写html{ font-size: 100px }也没效果，有没有其他配置没考虑到？

我来解答赞 8 收藏

反馈

2 条解答

迷人的治博 Lv1

你漏了 postcss-pxtorem 配置，vant3 默认用 rem 布局，需在 vite.config.js 或 postcss.config.js 里配置 remUnit 为 100（对应 html font-size）。

module.exports = {

  plugins: {

    postcss-pxtorem: {

      rootValue: 100,

      propList: ['*'],

    },

  },

};

这样所有 px 会自动转 rem，不同屏幕宽度下布局就不会错乱了。

2026-02-06 15:17

A. 淑怡 Lv1

这个问题挺常见的，主要是因为不同手机的屏幕分辨率和 DPR（设备像素比）不一样，Vant 虽然自带了一些适配方案，但有时候还是需要你自己手动调整。

一般这样处理：用 viewport 的动态计算来设置根字体大小。你现在的 html { font-size: 100px } 是固定的，没法适应不同设备。可以试试下面这个方法：

function setRem() {

  const width = document.documentElement.clientWidth || 375;

  const rem = Math.min(width / 10, 48); // 限制最大值，避免超大屏失真

  document.documentElement.style.fontSize = ${rem}px;

}



setRem();

window.addEventListener('resize', setRem);

把这个函数放在入口文件里执行就行。它会根据屏幕宽度动态计算 font-size，这样 Vant 的组件就能按照正确的比例显示了。

另外，底部导航图标重叠的问题可能是父容器高度或者 flex 布局没设置好。检查下有没有给父元素固定高度，或者尝试加个 min-height。如果还不好使，可以看看是不是某些机型的系统样式干扰了，加个 all: unset; 试一下。

最后提醒一下，Vant 的适配主要依赖 rem 单位，所以根字体大小一定要弄对，这是关键中的关键。

2026-02-01 14:16