视口单位转换（vh / vw ↔ px）

← ToolBox / 视口单位转换（vh / vw ↔ px）
📖 查看「Viewport Unit Converter (vw/vh)使用指南」

🔄 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 实现自适应间距与全屏布局。
⚠️ 使用说明与注意事项

📺 常见视口断点参考

设备宽度（px）典型 vw 示例
手机360–414100vw ≈ 360–414px
平板768–102450vw ≈ 384–512px
笔记本1280–144050vw ≈ 640–720px
桌面192050vw = 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)

  1. 在对应的输入框或选项中填写、选择所需参数。
  2. 点击「计算」或「生成」按钮运行。
  3. 在结果区查看输出，可复制结果或导出使用。

参数说明

适用场景

设计稿标注、配色与排版相关的快速参考。

常见问题

Viewport Unit Converter (vw/vh)是做什么的？
vw = 视口宽度的 1%，vh = 视口高度的 1%。做全屏首屏、自适应间距时常用来替代写死的 px。选择模式并填入基准视口尺寸即可换算。
如何使用Viewport Unit Converter (vw/vh)？
在对应的输入框或选项中填写、选择所需参数，点击「计算」或「生成」按钮即可运行，结果会在结果区实时显示，支持复制与导出。
计算结果准确吗？
本工具在你的本地浏览器中实时计算，不依赖服务器；只要输入的参数正确，结果即按对应的规则得出。涉及经验估算的部分仅供参考，不作为正式依据。
Viewport Unit Converter (vw/vh)适合哪些场景？
设计稿标注、配色与排版相关的快速参考。
使用本工具需要联网或上传数据吗？
不需要。所有计算均在你的设备本地完成，数据不会上传到任何服务器，可放心使用。