VantUI适配移动端750px设计稿

背景

在使用 vantui 做移动端项目时，按官网给的 rem 适配方式进行了如下配置

• 1、安装 postcss-pxtorem
npm install postcss-pxtorem

• 2、安装 lib-flexible
npm i -S amfe-flexible，在 main.js 文件引入 import 'amfe-flexible'

• 3、进行 postcss 配置

module.exports = {
    plugins: {
        autoprefixer: {
            browsers: ['Android >= 4.0', 'iOS >= 8'],
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*'],
        },
    },
};

问题

如果按照上面配置的话，vant组件的样式是正常的，但其他就显示不正常了。因为 vantui 设计稿宽度是 375px，而我们的设计稿宽度一般是 750px，如果把上面配置中的 rootValue 改为75，那么vant 组件的样式就会缩小一半，如下图所示：

显然，我们必须解决这个问题。

解决办法

我们只需要修改 postcss 配置即可，单独对 vantui 进行判断

const path = require('path');
module.exports = ({
    file
}) => {
    // vant 是375px的设计稿，我们是750的设计稿，所以需要判断
    const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 37.5 : 75.0;
    return {
        plugins: {
            autoprefixer: {
                browsers: ['Android >= 4.0', 'iOS >= 8'],
            },
            'postcss-pxtorem': {
                rootValue: designWidth,
                propList: ['*'],
            },
        },
    }
};

💄 如果使用的是 postcss-px-to-viewport 插件的话，可参考如下配置：

const path = require("path");
module.exports = ({
    file
}) => {
    // vant 是375px的设计稿，我们是750的设计稿，所以需要判断
    const designWidth = file.dirname.includes(path.join("node_modules", "vant")) ?
        375 :
        750;
    return {
        plugins: {
            "postcss-import": {},
            "postcss-url": {},
            autoprefixer: {
                browsers: ['Android >= 4.0', 'iOS >= 8']
            },
            // 设置移动端尺寸大小自适应
            "postcss-px-to-viewport": {
                viewportWidth: designWidth, // (Number) The width of the viewport.
                // viewportHeight: 1334, // (Number) The height of the viewport.
                unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
                viewportUnit: "vw", // (String) Expected units.
                selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
                minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
                mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
                // exclude: /(\/|\\)(node_modules)(\/|\\)/,
            },
        },
    };
};

😄 经过修改配置，页面最终恢复正常，我们可以像以前一样，按设计稿上的 px 来开发。