什么是 @posix/px
@posix/px 是一个前端开发工具，它可以让你在开发过程中更加方便地进行像素与 rem 的转换。使用它，你可以摆脱繁琐的手动计算像素与 rem 值的过程，只需要在代码中使用 px，就可以自动转换为 rem
安装 @posix/px
你可以在终端中通过 npm 安装 @posix/px，安装方法如下：
npm install -g @posix/px
使用 @posix/px
使用 @posix/px，非常的简单，只需要使用 px 单位即可。例如，我们想要设置一个元素的宽度为 200px，只需要像下面这样写：
.box {
width: 200px;
}在使用了 @posix/px 之后，我们只需要像下面这样修改：
.box {
width: 200px;
/* 将 px 替换为 p */
width: 200p;
}这时候，像素值 200 会自动转换为 rem 值，并添加相应的代码到 head 标签中：
-- -------------------- ---- -------
------
-------
----- -
---------- -----
-
---- -
---------- ------
-
-- ----- --
---- -
---------- -----
-
--------
-------如果你的设计稿是基于 750 宽度的，你也可以使用类似下面这样的代码，直接将 750 作为参数传递进去：
.box {
width: 100p(750);
}这时候，像素值会以 750 为基础进行转换。
注意事项
如果想要更好地使用
@posix/px，建议在 css 中将font-size单位改为rem，这样可以避免因为不同的font-size导致的像素与 rem 转换出现错误。如果你的设备支持不同的分辨率，你需要根据不同的分辨率去设置不同的 font-size，否则可能会出现样式问题。
总结
@posix/px 是一个非常实用的前端工具，使用它可以让前端开发更加便利。但是需要注意的是，在使用的过程中，需要一定的技巧和经验，否则可能会出现问题。建议在使用前认真阅读 API 文档，并结合实际情况进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ca981e8991b448e6124