对postcss-pxtorem的理解

插入一个题外bug

问题一：在vite + vue3 + postcss-pxtorem + vant 中，在本地运行时样式正常，提交代码到测试分支之后，样式错乱，vant组件的字体都大了一倍。

查阅了vant的官方文档，在浏览器自适应中看到vant推荐使用 postcss-px-to-viewport 进行转换。 vant的作者设计稿是按照375来的，我们公司的设计稿尺寸一般都是750，所以需要做一个配置

正题

当前移动端比较流行的适配方式有：

1、postcss-pxtorem + amfe-flexible

postcss-pxtorem用于将px转rem，amfe-flexible用来动态设置HTML的字体大小，去适配不同大小的屏幕。

第一步： 先安装postcss-pxtorem，然后在根目录建立一个文件名为postcss.config.js的文件，加入以下配置， rootVlue可以随意设置

搭配amfe-flexible插件来使用的话，rootValue是值就是设计稿的尺寸除以10，我们公司设设计稿一般是750，所以这里设置75

第二步：配置好之后上面的文件，在main.ts文件引入amfe-flexible这个插件就可以啦
第三步： 开始在less文件中编写样式

@bg: black;
.text1{
    font-size: 36px;
    color:@bg
}

运行之后：

@bg: black;
.text1{
    font-size: 0.48rem;
    color:@bg
}

这里展示一下amfe-flexible的源码，他是以10作为基数来计算

当设计稿为750的时候，把设计稿分成10份，那么根html的节点1rem = 75px， 这里html根字体大小不管怎么改变，都是初始值75的倍数

核心代码就是这段

假如设备窗口是393px,amfe-flexible的源码是 393/10 = 39.3,也可以这么计算， （393/750）* 75 = 39.3（不管怎么改变，都是初始值75的倍数）

举例 n = 16，设置rootValue 为16

假设n = 16

如果n设置为16，不是一个倍数关系，那么就不能使用amfe-flexible来动态改变html根节点的大小。

在postcss.fonfig.js中把rootValue设置为16

新建一个flexible.js文件，在main.ts中引入，这个文件的作用和amfe-flexible的作用想通，用来动态设置html字体大小。 其实核心原理就是比例相同，通过动态设置html的字体大小去达到自适应的效果

也可以这样写 更容易理解一些(就是去更改16倍数，不管html根字体大小怎么变，都是16的倍数):

按照750的设计稿尺寸，代码正常编写px，编译运行之后会自动转为rem

@bg: black;
.text1{
    font-size: 36px;
    color:@bg
}

运行之后：

@bg: black;
.text1{
    font-size: 2.25rem;
    color:@bg
}

不管视口宽度怎么变化，在运行之后，px转rem的数值都是一样的，变量是根html font-size的大小。

初始值设置的16，即1rem = 16px, 1rem = a px，随着视口的放大，缩小，a一定是16的倍数。

下面两个图展示了，视口宽度为375和750时，fong-size大小始终都是2.25rem

2、vw方案 postcss-px2vp

npm i -D postcss-px2vp类似

根目录创建postcss.config.js 文件：

module.exports = {
    plugins: {
        'postcss-px2vp': {
            viewportWidth(rule) { // 1. 如果设计稿宽度是750px + 使用Vant
                const file = rule.source?.input.file
                return file?.includes('vant') ? 375 : 750;
            },
            // viewportWidth: 750, // 2.如果设计稿宽度是 750px + 不适用Vant
            // viewportWidth: 375, // 3.如果设计稿宽度是 375px + 无论是否使用Vant
            propList: ['*','!font*','!line-height','!letter-spacing'],
        },
    },
};

修改postcss.config.js文件，需要重启

3、postcss-px-to-viewport插件，和postcss-px2vp类似

参考资料：

react项目适配postcss-pxtorem插件

了解postcss-pvtorem

移动端适配方案