vue项目 px自动转vw

最新推荐文章于 2025-06-25 14:07:07 发布

weixin_34343000

最新推荐文章于 2025-06-25 14:07:07 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发工具前端 ViewUI

原文链接：http://www.cnblogs.com/cutone/p/10898219.html

此博客为转载内容，原链接为https://www.cnblogs.com/cutone/p/10898219.html ，涉及JavaScript和前端开发工具相关信息技术内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

2、接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置：

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     // (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.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

特别声明：由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。

转载于:https://www.cnblogs.com/cutone/p/10898219.html