工具代码会在浏览器中处理所选文件和输入内容，不会将其提交给 TOOLGRID 的处理接口。 TOOLGRID 只衡量工具使用情况，不记录你输入的内容。
- 不上传工具输入至 TOOLGRID
- 不登录
- 复制前先检查
Loading tool…
这个工具能做什么
In-browser CSS unit converter. Converts any CSS length between all 7 common units simultaneously with adjustable base assumptions.
Type a numeric value and pick a unit. Every other CSS length unit — px, rem, em, %, pt, vw, vh — is computed from the same value and displayed simultaneously. The conversions use your configured root font size and viewport dimensions, so they match the assumptions your design system uses.
px is absolute (the spec-defined CSS pixel). rem is relative to the root font size (defaults to 16px). em is relative to the parent element's font size — this tool treats em as equal to rem (parent = root), which is correct for most use cases; if your element nests inside a parent with a different size, the actual em value differs.
% in CSS is context-dependent: for fonts it's relative to the parent, for widths it's relative to the containing block. This tool treats % as relative to a 16px base for the round-trip math, which works for typography but not for layout-percent conversions — use it as a directional guide rather than a precise layout calculator.
vw / vh are 1% of the configured viewport width / height. Set the viewport fields to match your design's reference breakpoint (often 1280×720 for desktop, 360×640 for mobile) for accurate predictions. Pair with our Color Converter for color-system conversions in the same workflow, or Unit Converter for physical length units (km, miles, etc.).
这个工具适合解决什么问题
Designers often hand off spacing values in px. Convert each one to rem so your CSS scales with user font-size preferences (an accessibility win that doesn't cost anything).
When using CSS clamp(min, preferred, max) for fluid typography, the preferred value is often expressed in vw or a mix. Convert between px and vw to sanity-check that your minimum and maximum bounds make sense at the breakpoints you care about.
Print stylesheets often use pt (the typographic unit). When porting to or referencing them in screen contexts, convert pt to px (96/72 ratio) to align with how the screen will render the same value.
依赖结果前需要检查什么
- Performance and maximum practical input size depend on browser memory, device speed, and the structure of the input.
- Review the generated result before replacing or publishing an original file.
如果还需要校验、转换或复用结果，可以继续打开相近的浏览器本地工具。
如何使用
01使用场景
Designers often hand off spacing values in px. Convert each one to rem so your CSS scales with user font-size preferences (an accessibility win that doesn't cost anything).
When using CSS clamp(min, preferred, max) for fluid typography, the preferred value is often expressed in vw or a mix. Convert between px and vw to sanity-check that your minimum and maximum bounds make sense at the breakpoints you care about.
Print stylesheets often use pt (the typographic unit). When porting to or referencing them in screen contexts, convert pt to px (96/72 ratio) to align with how the screen will render the same value.
Some design systems use a 10px root size so 1rem = 10px (easy mental math). Set the root field to 10 and the rem/em conversions adjust accordingly — useful when porting designs that assume this convention.
Rule of thumb: typography should be rem (responsive to user prefs); fixed-pixel elements like icons or hairlines should be px. Use this tool to convert and pick the cleaner of the two for your specific use.
使用技巧
- 01rem scales with user font preferences; px doesn't
Many users (often older users or accessibility settings) increase their browser's default font size from 16px to 20px or larger. Layouts in rem scale up gracefully; layouts in px stay rigid and can clip or overflow. Use rem for typography and spacing that should respect user prefs.
- 021pt = 1.333... px (96/72 ratio)
CSS defines the relationship as exactly 1in = 96px = 72pt. So 12pt is 16px, 14pt is ~18.67px. Print stylesheets are the main reason to deal with pt in CSS; for screen, px or rem is more idiomatic.
- 03vw and vh respect the viewport, not the document
A 100vh element fills the visible viewport, NOT the full document height. On mobile, vh has historically been quirky around the browser chrome (address bar). Modern CSS has svh / lvh / dvh for the small / large / dynamic viewport variants — convert by mental adjustment.
- 04% conversion is approximate
CSS % is context-sensitive: relative to parent font for font-size, to containing block width for widths, to containing block height for heights. This tool's % conversion assumes a 16px base, which works for typographic % but not for layout-percent. Use the result as a directional check, not a precise number.
常见问题
02How is rem different from em?
rem is always relative to the root <html> element's font size (the 'root em'). em is relative to the parent element's font size, which means em values compound through nesting — 1em inside a 1.5em-sized parent works out to 1.5em of the grandparent. This tool treats em as equal to rem (parent = root), which is true for top-level elements but underestimates the effective em value in deeply-nested contexts.
Why is my converted value showing a long decimal?
Because the math is exact, not rounded. 17px / 16px-root = 1.0625rem exactly. In practice, you'd round to 1.06rem or even 1rem depending on how strict your design tokens are. The full precision is shown so you can decide where to round.
What's the right root font size to use?
Default to 16px — that's the browser default and what most design systems assume. Some teams use 10px (so 1rem = 10px makes mental math easy); just make sure your CSS sets html { font-size: 62.5%; } in that case so the rem values you write match the assumption.
How accurate are vw / vh conversions?
Accurate for the viewport size you configure. If your design references a 1280-wide desktop layout, set viewport width to 1280 and the vw conversion will match what users at that size see. For other breakpoints, adjust the viewport fields accordingly.
What about subpixel precision and device pixel ratio?
CSS px is a logical / reference pixel — it abstracts over device pixel ratio (DPR). On a 2× retina screen, 1 CSS px renders as 2 physical pixels but is still treated as 1 px for layout. The conversions here use CSS-px logic; you don't need to manually adjust for DPR.
Are conversions sent to a server?
Unit conversion uses browser-side JavaScript arithmetic. Tool code processes selected files and entered content in your browser and does not submit them to a TOOLGRID processing endpoint.
Does the tool support ch, ex, or other lesser-used units?
Not currently. ch (width of '0') and ex (height of 'x') depend on the actual rendered font, which the tool doesn't have. For those rare units, use the browser's DevTools computed-style panel on an element using the unit to see the resolved px equivalent.