Vant移动端的适配

620 阅读1分钟

使用 vw 完成移动端适配

Vant 默认使用 px 作为样式单位,如果需要使用 viewport 单位 (vw, vh, vmin, vmax),推荐使用 postcss-px-to-viewport 进行转换。

1. 安装

npm install postcss-px-to-viewport -D
# or
yarn add -D postcss-px-to-viewport
# or
pnpm add -D postcss-px-to-viewport

2. 配置 postcss.config.js(新建)

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            // 以设备宽度 375 为基准计算 vw 的值
            // 假如 100px 的 div
            // 375 宽度下,最终转换出的 vw 应该是:x / 100vw = 100px / 375px,x 等于 26.66vw
            // 而转换出来的 26.66vw 自然在不同的设备宽度下所表示的 div 宽度会不一样,例如 414 设备下
            // 26.66vw / 100vw = div 宽度 / 414px
            viewportWidth: 375,
        },
    },
};

3. 注意重启项目 自行测试