CSS Units for Responsive Design
Convert between px, vw, vh, and % to build layouts that respond correctly to different screen sizes and orientations.
Context (affects rem/em/vw/vh/%)
Common pixel sizes → rem (at 16px base)
Responsive tips
Viewport units (vw, vh) are great for hero sections and overlays but can cause issues on mobile where browser UI shifts. Use dvh when targeting modern browsers.
For fluid typography, clamp() uses vw units: font-size: clamp(1rem, 2vw + 0.5rem, 2rem). Use the vw converter to calculate the middle value for your design.
Percentage units are relative to the parent container, not the viewport. Enter the parent's pixel size in the context panel to get accurate % conversions.
The viewport dimensions in the context panel affect vw and vh conversions. Set them to your target breakpoints (e.g., 375px mobile, 1440px desktop) for accurate results.
Como funciona
Por que usar o noso?
Also check out…
PX to REM for Web Development
Convert pixel values to rem units for scalable, ac
Convert Design Specs to CSS Units
Translate Figma or Sketch pixel values to rem/em u
Tailwind CSS Unit Reference
Understand how Tailwind CSS sizing classes map to
Convert CSS Units for Print Stylesheets
Convert between px, pt, and rem for print media qu