视口单位转换（vh / vw ↔ px）
vw 为视口宽度的 1%，vh 为视口高度的 1%。选择模式并填入基准视口尺寸即可在视口单位与 px 之间换算。
🔄 Viewport Unit (vw/vh) Converter
Convert between viewport units and pixels: vw and vh are 1% of the viewport width and height, handy for full-screen layouts.
📐 工作原理与说明
px → vw：vw = px ÷ 视口宽度 × 100；vw → px：px = vw × 视口宽度 ÷ 100（vh 同理按高度计算）
vw 与 vh 分别是视口宽、高的 1%，因此换算需给定基准视口尺寸。按宽度换算时以视口宽为基准、按高度换算时以视口高为基准，反向（vw/vh → px）则为乘算，用于替代写死的 px 实现自适应间距与全屏布局。
⚠️ 使用说明与注意事项
- vw 永远基于视口【宽度】，vh 永远基于视口【高度】，二者互不相干。
- 移动端注意：部分浏览器的 vh 包含地址栏高度，可用 dvh/svh/lvh 等动态视口单位更精准。
- 100vw 在大屏可能超出预期并引发横向滚动，用于全宽时建议配合 overflow-x:hidden。
📺 常见视口断点参考
| 设备 | 宽度（px） | 典型 vw 示例 |
|---|---|---|
| 手机 | 360–414 | 100vw ≈ 360–414px |
| 平板 | 768–1024 | 50vw ≈ 384–512px |
| 笔记本 | 1280–1440 | 50vw ≈ 640–720px |
| 桌面 | 1920 | 50vw = 960px |
换算公式：vw = px ÷ 视口宽度 × 100；px = vw ÷ 100 × 视口宽度（vh 同理用高度）。
📚 深度解析：Viewport Unit Converter (vw/vh)
💡 常见使用场景
- 全屏区块。
- 视口单位换算。
- 响应式高度。
50vw @宽1280
<p><strong>输入：</strong>50vw、视口宽 1280。</p><p><strong>处理：</strong>相乘。</p><p><strong>输出：</strong>640px；随视口变。</p>
❓ 常见问题（FAQ）
- 移动端地址栏？
- vh 受地址栏影响有波动，关键布局可用 dvh 等新版单位。
- 和 % 有什么区别？
- % 相对父元素，vh/vw 相对视口；全屏布局用视口单位更直接。
- 会保存或上传我的内容吗？
- 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
如何使用Viewport Unit Converter (vw/vh)
- 在对应的输入框或选项中填写、选择所需参数。
- 点击「计算」或「生成」按钮运行。
- 在结果区查看输出，可复制结果或导出使用。
参数说明
- 转换模式
- 数值
- 基准视口尺寸（px，宽或高视模式而定）
适用场景
设计稿标注、配色与排版相关的快速参考。
常见问题
- Viewport Unit Converter (vw/vh)是做什么的？
- vw = 视口宽度的 1%，vh = 视口高度的 1%。做全屏首屏、自适应间距时常用来替代写死的 px。选择模式并填入基准视口尺寸即可换算。
- 如何使用Viewport Unit Converter (vw/vh)？
- 在对应的输入框或选项中填写、选择所需参数，点击「计算」或「生成」按钮即可运行，结果会在结果区实时显示，支持复制与导出。
- 计算结果准确吗？
- 本工具在你的本地浏览器中实时计算，不依赖服务器；只要输入的参数正确，结果即按对应的规则得出。涉及经验估算的部分仅供参考，不作为正式依据。
- Viewport Unit Converter (vw/vh)适合哪些场景？
- 设计稿标注、配色与排版相关的快速参考。
- 使用本工具需要联网或上传数据吗？
- 不需要。所有计算均在你的设备本地完成，数据不会上传到任何服务器，可放心使用。