从固定像素到灵活布局。输入尺寸，让换算简单一点。From fixed pixels to fluid layouts. A little less math, a little more flow.
vw =× 100
1vw 等于视口宽度的 1%。用像素值除以设计稿对应的视口宽度，再乘以 100，就能得到 vw。1vw equals 1% of the viewport width. Divide the pixel value by your design's viewport width, then multiply by 100.
例如，375px 视口中的 100pxFor 100px in a 375px viewport100 ÷ 375 × 100 = 26.6667vw
| PIXELS | VIEWPORT WIDTH |
|---|---|
| 8px | 2.1333vw |
| 16px | 4.2667vw |
| 24px | 6.4vw |
| 32px | 8.5333vw |
| 100px | 26.6667vw |
填写设计稿对应的 CSS 视口宽度。例如，设计稿基于 375px 的手机屏幕，就填 375。这里使用 CSS 像素，不是屏幕物理像素；如果 750px 的稿件是按 2 倍图制作，请先将稿件尺寸和元素尺寸同时除以 2，或直接将两者都按 2 倍值输入，保持比例一致。Use the CSS viewport width your design is based on, such as 375 for a 375px mobile layout. This is measured in CSS pixels, not physical screen pixels. If a 750px design is drawn at 2× scale, divide both the element size and design width by 2, or enter both at 2× scale to preserve the ratio.
vw 以视口宽度为基准，width: 50vw 表示视口宽度的一半。宽度的百分比通常以包含块宽度为基准，width: 50% 通常表示包含块宽度的一半。因此，父容器宽度不等于视口宽度时，两者的结果会不同。vw is relative to the viewport: width: 50vw is half the viewport width. A percentage width is usually relative to the containing block: width: 50% is usually half that block's width. The results differ when the containing block is narrower or wider than the viewport.
适合随屏幕宽度缩放的尺寸可以使用 vw，但边框、固定图标等不一定需要转换。文字可结合 rem 与 clamp() 设置合理的缩放范围；布局也可通过 max-width 和媒体查询限制宽度。负数换算适用于外边距或位移，不适用于 CSS 的 width 属性。Use vw for dimensions that should scale with the viewport. Borders and fixed-size icons may work better in other units. For text, combine rem and clamp() to set sensible limits. Use max-width and media queries to constrain layouts. Negative conversions work for margins or offsets, but not for the CSS width property.
可以。将此 HTML 文件保存到本地后，直接用浏览器打开即可，无需联网。所有计算都在浏览器内完成，不发送输入数据，也没有追踪脚本。页面只在浏览器允许时记住你的语言偏好，不保存换算数值。Yes. Save this HTML file and open it directly in your browser, with no internet connection needed. All calculations happen on your device. No input data is sent anywhere, and there are no tracking scripts. Only your language preference is remembered when browser storage is available; conversion values are not saved.