说明

一个 PostCSS 插件

插件的地址是 https://github.com/lkxian888/postcss-px-to-viewport-8-plugin

和著名的 postcss-px-to-viewport 插件一样,可以将 px 单位转换为视口单位的 (vw, vh, vmin, vmax)

但是这个插件,支持不同尺寸的设计稿(我个人最看重这一点)

基本用法

基本用法 看这里 https://github.com/lkxian888/postcss-px-to-viewport-8-plugin , ,我就说说这个插件最独特的特点 【支持不同尺寸的设计稿】

viewportWidth 参数

其中 viewportWidth 这个参数,就是我们要设置的设计稿的宽度,比如我们的设计稿是 750px,那么这个参数写 750

这个参数,还可以为函数,这样就可以支持不同尺寸的设计稿了

如:

viewportWidth: (file) => {
    if (file.includes('/mobile/')) {
        return 1125
    } else if (file.includes('/pc/')) {
        return 1920
    } else {
        return undefined
    }
}

上面的配置,会对 mobile 目录下的样式,应用 1125px 的设计稿,对 pc 目录下的样式,应用 1920px 的设计稿,其他的不做处理

exclude 参数

可以过滤某些目录,不对里面的css做转换, 如 不对目录 node_modulesglobals 下的 css 不做转换

 exclude: [/node_modules/, /globals/] // 设置忽略文件,用正则做目录名匹配