什么是 postcss-px-resize?
postcss-px-resize 是一个 postcss 插件，它可以将 CSS 文件中的 px 单位自动转换为 rem 或者 vw/vh 单位，并且可以在设计稿不同尺寸之间自动切换单位大小。
安装
在使用 postcss-px-resize 之前，需要先安装 postcss 和 postcss-px-to-viewport 这两个依赖：
npm install -D postcss postcss-px-resize
使用方法
在项目根目录下新建 postcss.config.js 文件，写入以下内容：
-- -------------------- ---- ------- -------------- - - -------- - ----------------------------------- -------------- ---- -- ----- -------------- -- -- ----- --- -------- -------------- -- -- ---------- --------- ------ -- ---------- - ------ ------------------ --- -- ----- --- ------ ------------- -------- --- ----- ---- ----------- ----- -- ---------- -- --- ------------------------------ ------------ --- -- ----- -- - -展开代码
注意，这里我们还需要添加一个 postcss-px-to-viewport 插件，用于将 px 转换为 vw/vh 单位。
在 package.json 中添加以下命令：
{ "scripts": { "dev": "postcss src -d dist" } }
最后，在 CSS 文件中使用 px 单位即可：
.header { font-size: 30px; margin-top: 20px; }
编译后会自动转换为 vw/vh 单位：
.header { font-size: 4vw; margin-top: 2.66667vh; }
配置说明
postcss-px-resize 的配置很简单，只需要在插件中添加一个 designWidth 参数即可，表示设计稿的宽度。
同时，我们还需要在 postcss-px-to-viewport 中添加相应的配置，包括 designWidth，unitPrecision，minPixelValue 等。
案例演示
下面是一个简单的案例演示，展示如何使用 postcss-px-resize 对 CSS 中的 px 单位进行转换。
-- -------------------- ---- ------- ------ ------ ------- ---------- - ------- ----- ----------------- -------- ----------- ------- - ------ - ---------- ----- ----------- ----- - -------- - ---------- ----- ----------- ----- - ------ ----------- ------- - -------- - ---------- ----- - - -------- ------- ------ ---- ------------------ ---- -------------------- ------------------------ ---- -------------------- -- - ------ ----------- ------ ------- -------展开代码
在项目根目录下运行：
npm run dev页面 CSS 代码自动转换为：
-- -------------------- ---- ------- ---------- - ------- ---------- ----------------- -------- ----------- ------- - ------ - ---------- ---------- ----------- ----------- - -------- - ---------- ------ ----------- ---------- - ------ ----------- ------- - -------- - ---------- ---------- - -展开代码
可以看到，所有的 px 单位都自动转换为了 vw/vh 单位，并且在不同的设备尺寸下自动调整大小。
总结
通过本文的介绍，我们学习了如何使用 postcss-px-resize 对 CSS 中的 px 单位进行转换，并且对不同设备尺寸自动调整大小。这是一个十分实用的工具，可以大大提高前端开发效率。建议多加尝试，并灵活运用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1e81e8991b448e6eb2
