移动端单位适配postcss-px-to-viewport

在之前使用的较为古老移动端适配方案rem，下面这两句代码，有不少老移动端都不会陌生：

const devicewidth = document.documentElement.clientwidth || document.body.clientwidth
document.querySelector('html').style.fontSize = devicewidth / 7.5 + ' px'

在移动端UI稿尺寸为7501334满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 比如UI稿一个长宽分别为120px40px，那么开发者对应的写成1.2rem*0.4rem就可以了

这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的，有16的，很多已经严重超出口算力所能及的范畴了。

postcss-px-to-viewport

postcss-px-to-viewport完美解决以上痛点，它将px转换成视口单位vw，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

安装插件

执行命令npm install postcss-px-to-viewport -D

配置文件

在根目录下新加文件postcss.config.js添加如下配置

module.exports = {
  plugins:{
     "postcss-px-to-viewport":{
        unitToConvert: 'px',//要转化的单位
        viewportWidth: 320, //ui设计稿的宽度
     }
  },
}

查看效果

编写样式设置宽度

.con{
    width: 200px;
    background-color: red;
    font-size: 15px;
}

效果

可以看到代码中px单位 在页面中自动转换为vw单位