UnoCSS 插件：像素值自动转换为 vw/vh 的解决方案
在现代前端开发中，为了实现响应式设计，我们通常会使用 vw（视口宽度）或 vh（视口高度）作为单位。相较于固定的像素单位，vw/vh 可以更好地适配不同设备尺寸。然而，在日常开发中频繁手动转换像素值为视口单位不仅繁琐，而且容易出错。
为了提高效率，我开发了一个 UnoCSS 插件：unocss-preset-px-to-vw-or-vh，它可以自动将像素值转换为 vw 或 vh，极大地简化了响应式设计的流程。
为什么选择这个插件？
🌟 主要功能
- 像素值自动转换：将像素值自动转换为视口宽度（
vw）或视口高度（vh）。 - 自定义设计尺寸：支持根据设计稿设置自定义宽度和高度。
- 多属性支持：适用于
width、height、padding、margin等常见 CSS 属性。
🚀 安装与使用
安装
首先通过 npm 安装插件：
npm install unocss-preset-px-to-vw-or-vh
基本配置
接着，在 UnoCSS 配置文件中引入并配置插件：
import { defineConfig } from 'unocss';
import { presetPxToViewport } from 'unocss-preset-px-to-vw-or-vh';
export default defineConfig({
presets: [
presetPxToViewport({
// 可选：自定义设计尺寸（默认为 1920x1080）
designWidth: 1920,
designHeight: 1080,
}),
],
});
实际案例
以下是插件的工作示例：
示例 1：宽度转换
<div class="w-1920px"></div>
在默认的 1920px 设计宽度下，w-1920px 将会被转换为：
width: 100vw;
示例 2：高度转换
<div class="h-1080px"></div>
在默认的 1080px 设计高度下，h-1080px 将会被转换为：
height: 100vh;
示例 3：混合转换
对于一些同时涉及 vw 和 vh 的样式，例如 padding：
<div class="p-20px"></div>
将会转换为：
padding: 1.85vh 1.04vw;
转换公式
插件内部会根据以下公式进行计算：
-
对于
vw：(pixel-value * 100) / designWidth -
对于
vh：(pixel-value * 100) / designHeight
支持的属性
转换为 vw 的属性
widthpadding-leftpadding-rightmargin-leftmargin-rightleftright
转换为 vh 的属性
heightpadding-toppadding-bottommargin-topmargin-bottomtopbottomleading
为什么使用 UnoCSS？
UnoCSS 是一种 即时原子化 CSS 引擎，它不同于传统的 CSS 框架（例如 TailwindCSS），不需要提前生成类名，而是基于实际使用的类名动态生成样式。借助 UnoCSS 的插件机制，我们可以轻松扩展功能，比如将像素值转换为响应式视口单位。
结语
使用 unocss-preset-px-to-vw-or-vh 插件，可以让响应式设计变得更加轻松快捷，再也不用手动计算和写繁琐的 vw 或 vh 单位了。如果你正在使用 UnoCSS，并且需要在项目中实现响应式设计，这个插件将是一个不错的选择！
欢迎贡献
如果你有任何建议或者改进想法，欢迎提交 Pull Request！🎉
开源许可
本插件遵循 MIT 许可协议，免费开源。
赶快试试看吧！✨
