Should I use px or rem value units in my CSS?
I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am trying to decide what unit of measurement I should use for the sizes of my fonts and elements, but am unable to find a conclusive answer.
My question is: should I use px or rem in my CSS?
px isn't compatible with users who adjust their base font size in their browser. em s because they are more of a hassle to maintain, compared to rem s, as they cascade. rem s are resolution independent and therefore more desirable. But others say that most modern browsers zoom all elements equally anyway, so using px is not a problem. I'm asking this because there are a lot of different opinions as to what is the most desirable measure of distance in CSS, and I am not sure which is best.
TL;DR: use px .
The Facts
First, it's extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.
CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the px unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.
That said, up until 2010 (and the mobile zoom situation notwithstanding), the px almost always did equal one physical pixel, because all widely available displays were around 96dpi.
Sizes specified in em s are relative to the parent element. This leads to the em 's "compounding problem" where nested elements get progressively larger or smaller. For example:
body { font-size:20px; }
div { font-size:0.5em; }
Gives us:
<body> - 20px
<div> - 10px
<div> - 5px
<div> - 2.5px
<div> - 1.25px
The CSS3 rem , which is always relative only to the root html element, is too new to rely on. As of July 2012, around 75% of all browsers in use support the rem .
The Opinion
I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.
In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as em s). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px , they wouldn't scale when changing the browser's font size option.
Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.
Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody1 does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).
1 - within statistical error, naturally
If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)
One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.
So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use em s anyway.
I would like to praise josh3736's answer for providing some excellent historical context. While it's well articulated, the CSS landscape has changed in the almost five years since this question was asked. When this question was asked, px was the correct answer, but that no longer holds true today.
tl;dr: use rem
Unit Overview
Historically px units typically represented one device pixel. With devices having higher and higher pixel density this no longer holds for many devices, such as with Apple's Retina Display.
rem units represent the r oot em size. It's the font-size of whatever matches :root . In the case of HTML, it's the <html> element; for SVG, it's the <svg> element. The default font-size in every browser* is 16px .
At the time of writing, rem is supported by approximately 98% of users. If you're worried about that other 2%, I'll remind you that media queries are also supported by approximately 98% of users.
On Using px
The majority of CSS examples on the internet use px values because they were the de-facto standard. pt , in and a variety of other units could have been used in theory, but they didn't handle small values well as you'd quickly need to resort to fractions, which were longer to type, and harder to reason about.
If you wanted a thin border, with px you could use 1px , with pt you'd need to use 0.75pt for consistent results, and that's just not very convenient.
On Using rem
rem 's default value of 16px isn't a very strong argument for its use. Writing 0.0625rem is worse than writing 0.75pt , so why would anyone use rem ?
There are two parts to rem 's advantage over other units.
px value of rem to whatever you'd like Respecting User Preferences
Browser zoom has changed a lot over the years. Historically many browsers would only scale up font-size , but that changed pretty rapidly when websites realized that their beautiful pixel-perfect designs were breaking any time someone zoomed in or out. At this point, browsers scale the entire page, so font-based zooming is out of the picture.
Respecting a user's wishes is not out of the picture. Just because a browser is set to 16px by default, doesn't mean any user can't change their preferences to 24px or 32px to correct for bad vision. If you base your units off of rem , any user at a higher font-size will see a proportionally larger site. Borders will be bigger, padding will be bigger, margins will be bigger, everything will scale up fluidly.
If you base your media queries on rem , you can also make sure that the site your users see fits their screen. A user with font-size set to 32px on a 640px wide browser, will effectively be seeing your site as shown to a user at 16px on a 320px wide browser. There's absolutely no loss for RWD in using rem .
Changing Apparent px Value
Because rem is based on the font-size of the :root node, if you want to change what 1rem represents, all you have to do is change the font-size :
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}<p>Don't ever actually do this, please</p> This article describes pretty well the pros and cons of px , em , and rem .
The author finally concludes that the best method is probably to use both px and rem , declaring px first for older browsers and redeclaring rem for newer browsers:
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
上一篇: 使用CSS自定义字体？