vue手机端适配之vw适配

下载所需依赖包:

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;
}

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

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

vw适配优势：

容器适配，

可以使用vw文本的适配，

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

内距和外距，可以使用vw

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

具体了解请戳这里

上面收费，转文点这里

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