下载所需依赖包:

yarn add postcss-url postcss-import postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced  

开发不用的自己下到dev里面,上面只是表示要下这些依赖包 

在项目根目录下找到.postcssrc.js或者postcss.config.js(不需要重启项目)并配置:

 

"plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {},
        "postcss-write-svg": {
            "utf8": false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {//http://npm.taobao.org/package/postcss-px-to-viewport
            viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 
            viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) 
            viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw 
            selectorBlackList: ['.ignore', '.hairlines',], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 
            exclude:[/node_modules/,/vwIgnoreCss/], //If value is regexp, will ignore the matches files.If value is array, the elements of the array are regexp.
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 
            mediaQuery: false // 允许在媒体查询中转换`px`
        },
        "postcss-viewport-units": {},
        "cssnano": {
            "preset": "advanced",
            "autoprefixer": false,
            "postcss-zindex": false
        }
        // to edit target browsers: use "browserslist" field in package.json
        //	"autoprefixer": {}
    }

目前出视觉设计稿,我们都是使用750px宽度的,那么100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程,不需要进行任何的计算,直接在代码中写px

.test {
    border: .5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}
[w-188-246] {
    width: 188px;

}

编译出来的CSS:

.test {
    border: .5px solid #000;
    border-bottom-width: .533vw;
    font-size: 1.867vw;
    line-height: 2.667vw;
    position: relative;
}
[w-188-246] {
    width: 25.067vw;
}

在不想要把px转换为vw的时候,首先在对应的元素(html)中添加配置中指定的类名.ignore.hairlines(.hairlines一般用于设置border-width:0.5px的元素中):

<div class="box ignore"></div>

写CSS的时候:

.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

编译出来的CSS:

.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中带有.ignore类名,在这个类名写的`px`不会被转换*/
    background-color: red;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

上面解决了pxvw的转换计算。那么在哪些地方可以使用vw来适配我们的页面,还不懂可以看底下的几个链接!

如果不想转为vw单位 配置exclude就可以,上面有解释,直接给个正则或者正则数组即可

vw适配优势:

容器适配,

可以使用vw文本的适配,

可以使用vw大于1px的边框、圆角、阴影都可以使用vw

内距和外距,可以使用vw

修改了配置文件一定要重启项目!!

具体了解请戳这里

上面收费,转文点这里

demo地址  感觉有用的话来个star!

Logo

前往低代码交流专区

更多推荐