Viewport Unit Converter (vw/vh) 使用指南
<p><strong>输入：</strong>50vw、视口宽 1280。</p><p><strong>处理：</strong>相乘。</p><p><strong>输出：</strong>640px；随视口变。</p>
核心功能
- 在视口单位（vw / vh）与 px 之间双向换算
- 支持按视口宽度或高度为基准，四种模式（px→vw、px→vh、vw→px、vh→px）
- 基准视口尺寸可自定义（默认 1920px），便于对齐设计稿断点
- 纯本地计算，不上传任何输入
适用场景
- 全屏区块。
- 视口单位换算。
- 响应式高度。
使用步骤
- 选择转换模式（px → vw / px → vh / vw → px / vh → px）
- 输入需要换算的数值
- 填入基准视口尺寸（按模式对应宽度或高度）
- 读取结果区带单位的值与所用基准提示
- 把结果代入 CSS 并用 DevTools 改变窗口宽度验证表现
实用技巧
- 移动端浏览器地址栏收起/展开会让 vh 变化，关键全屏布局优先用 dvh / svh / lvh
- vw 会包含滚动条宽度，桌面端可能出现横向溢出，可用 100% 或 calc 规避
- 视口单位适合全屏区块与流式字号，组件内部间距仍建议 rem 更可控
- 换算只在给定基准下成立，改断点后需按新基准重算
常见问题
- 移动端地址栏？
- vh 受地址栏影响有波动，关键布局可用 dvh 等新版单位。
- 和 % 有什么区别？
- % 相对父元素，vh/vw 相对视口；全屏布局用视口单位更直接。
- 会保存或上传我的内容吗？
- 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。