CSS Unit Converter - Online PX, REM, EM, VW, % All in One

PX (pixels) is an absolute unit—one pixel on the screen. REM (root EM) is relative to the root HTML element's font size (default 16px in most browsers). EM is relative to the parent element's font size, which can compound when nested. REM is generally preferred for scalable, consistent typography, while EM is useful for component-level proportional spacing.

Divide the pixel value by your base font size. With the standard 16px base: 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem, 8px ÷ 16 = 0.5rem. This converter does the math instantly—just enter your PX value, select PX as the source, and see the REM result.

All major browsers default to 16px as the root font size. However, users can change this in browser settings, and many CSS frameworks override it. Our converter defaults to 16px but lets you adjust the base font size in Settings to match your project's configuration.

VW (viewport width) and VH (viewport height) are relative to the browser window size. 1vw = 1% of the viewport width, and 1vh = 1% of the viewport height. For example, on a 1920px-wide screen, 1vw = 19.2px. On a 375px-wide phone screen, 1vw = 3.75px. These units are excellent for responsive, fluid layouts that scale with the screen.

VMIN uses the smaller dimension of the viewport (width or height), while VMAX uses the larger one. On a landscape desktop (1920×1080), 1vmin = 10.8px (based on height) and 1vmax = 19.2px (based on width). On a portrait phone (375×812), 1vmin = 3.75px (based on width) and 1vmax = 8.12px (based on height). VMIN is great for ensuring elements don't overflow on narrow screens.

The CSS standard defines: 1 inch = 96px, 1cm = 96÷2.54 ≈ 37.8px, 1mm = 96÷25.4 ≈ 3.78px. These are based on a reference pixel density of 96 DPI. Note that actual physical sizes on screens vary by device—these conversions represent CSS reference values, not real-world measurements on all displays.

Percentages are relative to the parent container, making them ideal for nested layouts where you want elements to fill a portion of their parent. Viewport units (VW/VH) are relative to the entire browser window, making them perfect for full-screen sections, hero images, and fluid typography that scales with the window. Use % for layout components, VW/VH for screen-level sizing.

Several factors affect this: (1) The website may have a non-standard base font size set on the HTML element. (2) Browser zoom levels alter perceived sizes. (3) Operating system display scaling (125%, 150%) affects rendering. (4) Some frameworks like Bootstrap or Tailwind set their own root font sizes. Always check what base font size a project uses before converting REM/EM values. Our Settings panel lets you match any base font size.

Use the viewport presets in Settings to quickly switch between common screen sizes (desktop, tablet, mobile). Enter a pixel value, and you'll instantly see the equivalent VW/VH values for each screen size. This helps you translate fixed pixel designs into fluid, responsive units. Pro tip: use the "Detect My Viewport" button to convert values specifically for your current browser window.

Points (PT) come from print typography. In CSS, 1pt = 1.333px (or 1px = 0.75pt). PT is primarily used in print stylesheets (@media print) and when specifying font sizes for print output. For screen display, PX, REM, and EM are far more common. Our converter handles PT seamlessly if you need to translate between screen and print units.