侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 42 篇文章
  • 累计创建 37 个标签
  • 累计收到 351 条评论

目 录CONTENT

文章目录

VantUI适配移动端750px设计稿

M酷
2021-03-05 / 1 评论 / 0 点赞 / 1,747 阅读 / 2,495 字 / 正在检测是否收录...

背景

在使用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来开发。

0
广告 广告

评论区