PX to REM: CSS Units Explained for Real Projects
作者： Salty Deprecated Software Engineer
本文由 AI 辅助创作，并经团队审核以确保准确性和质量。所有技术信息和示例均已验证。
CSS has more unit types than most developers use. Most people default to px for everything, then wonder why their site looks wrong on different screen sizes or why text doesn't scale when a user increases their browser font size. The answer is almost always rem.
This guide covers every CSS unit you'll actually use, explains why rem has become the modern default for typography, and includes the conversion math you'll reference constantly.
Absolute Units: px
A CSS pixel (px) is the most familiar unit. It maps to device pixels on non-HiDPI screens, and to logical pixels on retina/HiDPI displays. 1px is always 1px — it doesn't scale.
- Borders:
border: 1px solid #ccc - Box shadows:
box-shadow: 0 2px 4px rgba(0,0,0,0.1) - Fixed-size decorative elements (icons, dividers)
- Media query breakpoints (though em works too)
- Font sizes — px doesn't respect the user's browser font-size preference
- Spacing that should scale with text (padding, margins on text elements)
Relative Units: rem
rem stands for root em. It's relative to the font size of the root element (<html>), which browsers default to 16px.
Browser default: html font-size = 16px
1rem = 16px
1.5rem = 24px
2rem = 32px
0.75rem = 12px
0.875rem = 14px
The critical advantage of rem: when a user sets their browser font size to 20px (larger for readability), everything in rem scales proportionally. Your 1rem font becomes 20px, your 1.5rem heading becomes 30px. The entire layout breathes with the user's preference.
WCAG 1.4.4 (Level AA) requires that text can be resized up to 200% without loss of content or functionality. Using rem for typography is the easiest way to satisfy this. Users who set browser font size larger because of vision needs will get a broken experience with fixed px fonts.
The 62.5% Trick
Math like "1rem = 16px" means values like 14px become 0.875rem — awkward. Many developers use the 62.5% base-size trick to make rem math easier:
html {
font-size: 62.5%; /* 62.5% of 16px = 10px */
}
Now: 1rem = 10px, so:
1.4rem = 14px
1.6rem = 16px
2.4rem = 24px
3.2rem = 32px
You must set font-size: 1.6rem on body or everything defaults to 10px (too small). If you're using a design system or framework that assumes 16px base, this trick can cause conflicts. Modern tooling (Tailwind, CSS-in-JS) handles the math for you so this trick is less common in greenfield projects.
em: The Context-Dependent Unit
em is relative to the current element's font size, not the root. This makes it powerful but potentially surprising when elements are nested.
/* Parent has 16px font-size */
.parent { font-size: 16px; }
.child { font-size: 1.5em; } /* = 24px */
/* Now child has 24px, so grandchild: */
.grandchild { font-size: 1.5em; } /* = 36px, not 24px! */
This compounding effect is why most developers prefer rem for font sizes. But em shines for spacing that should scale with the component's own font size:
/* Button padding that scales with button font size */
.btn {
padding: 0.5em 1em; /* scales with font-size */
font-size: 1rem; /* controlled at root */
}
Viewport Units: vw, vh, vmin, vmax
Viewport units are percentages of the browser window size — not the element or root font size.
vw — 1% of viewport width. 100vw is full browser width.vh — 1% of viewport height. 100vh is full browser height.vmin — 1% of the smaller viewport dimension (height or width).vmax — 1% of the larger viewport dimension.dvh — Dynamic viewport height (accounts for mobile browser chrome appearing/disappearing). Use instead of vh on mobile.svh — Small viewport height (smallest possible viewport — always accounts for mobile UI). Safest for full-screen mobile layouts.100vh on mobile includes the browser address bar, which can appear/disappear as users scroll. This causes layout jumps. Use 100dvh (dynamic viewport height) or min-height: 100svh to avoid it.
Percentage (%)
Percentage is relative to the parent element, not the root or viewport. Most useful for widths and heights in responsive layouts:
.container { width: 100%; max-width: 1200px; }
.sidebar { width: 25%; }
.main { width: 75%; }
PX to REM Conversion Table
Based on browser default 16px root font size. Use our free PX to REM converter for any value:
Fluid Typography with clamp()
Modern CSS lets you scale font sizes fluidly between viewport sizes using clamp():
/* Min 1rem, fluid between screens, max 1.5rem */
h1 {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
This eliminates the need for font-size media queries in many cases. The text is never smaller than 16px or larger than 24px, and scales smoothly based on viewport width in between.
The Practical Decision Guide
The shift from px to rem for typography is one of those changes that costs almost nothing to make but has a real accessibility impact. Users with visual impairments who increase their browser's default font size will have a much better experience on sites that use rem — and it's a requirement for WCAG compliance.
以 The IT Hustle 的编辑笔名写作——25 年以上笔记本维修技师、系统管理员、存储工程师和软件工程师的经验,如今用在 AI 智能体运维上。每篇文章发布前都经过人工审核,详见编辑准则。
获取最新资讯
第一时间了解新工具、博客文章和更新动态。无垃圾邮件。