Media queries with rem units in Chrome?
The spec says this about relative units such as both rem
and em
:
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
(The initial value of font-size
is medium
, which is usually equal to the default font size setting in the browser's user preferences.)
Since Media Queries 3 doesn't define special rules for any specific units besides the above quote on relative units, rem
should act like em
, working off the initial value of font-size
. If it doesn't work in Chrome, it's most likely a bug.
font-size using rem in chrome
Hard to say for 100%, but it seems like some local issue that relates to Chrome Extensions or something else. Please check your project, as well as example below in incognito mode with turned off extensions.
In example below you can make sure that's issue not in REM, and compare it with EM.
.with-rem {
font-size: clamp(1rem, -0.875rem + 8.333vw, 1.3rem);
}
.with-em {
font-size: clamp(1em, -0.875em + 8.333vw, 1.3em);
}
li {
background-color: lightgray;
margin: 10px 0;
}
<ul>
<li>This list item not styled</li>
<li class="with-rem">This list item styled with REM</li>
<li class="with-em">This list item styled with EM</li>
</ul>
Chrome does not keep consistent rem units on zoom-in
The solution I found was to simply multiply the original font-size
by 2, and then divide all rem
sizes by 2 as well, because then the font-size
at 50% will be 7px
again. In other situations, that may not work, but repeating this trick again might fix
The problem seems to be that Chrome decides that its rendered font sizes cannot be less than 3px, which means that any font size below 12px will gradually creep towards being rendered at 3px, but will never shrink to smaller than that.
window.onresize = function() { console.log(getComputedStyle(document.body.parentElement, null).getPropertyValue("font-size"));}
html { font-size: 14px;}body { font-size: 1em;}.box { width: 5rem; height: 5rem; background: red;}
<html> <head> </head> <body> <div class="box"></div> <p>foo bar baz</p> </body></html>
Rem-Based Layouts, Zooming on chrome is inconsistent, PX vs REM
That's because Chrome's behavior of setting a minimum font-size, so if you zoom-out, chrome will set the minimum font-size to 6px (12px for chinese and japanese version). So your div
will have a minimum width as it depends on your base font-size (which can't be smaller then chrome's minimum).
See also:
Chrome will increase the font size when zooming out
[Edit] Additional Information:
Chromium Tickets & Discussions On this topic:
https://bugs.chromium.org/p/chromium/issues/detail?id=16875
https://bugs.chromium.org/p/chromium/issues/detail?id=36429
-webkit-text-size-adjust
Support Dropped, so the viable solution for this behavior is not reliable anymore:
https://trac.webkit.org/changeset/145168/webkit
Should I use px or rem value units in my CSS?
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 theem
'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.25pxThe CSS3
rem
, which is always relative only to the roothtml
element, is now supported on 99.67% of all browsers in use.
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.
Media Queries and `rem`s not working in Safari 5.1
It seems that in Safari 5.1, though it supports both media queries and rem
s, it doesn't support them together. Switch the rem
s in your media queries to em
s and you'll be good.
This is frustrating though if, like me, you store a lot of your width/breakpoints in SASS or LESS variables for easy reuse, and use them as both breakpoints and widths, the latter where 1rem may not equal 1em. A way to get around this would be adding font-size:1rem
to the parent element to ensure 1em does equal 1rem, but that's not always possible.
Related Topics
Can Relative Paths Be Used for @Font-Face Src
How to Overflow the Contents of a Column into the Next Column Using CSS
CSS Calc and Min-Height Can Not Team Up Properly
Why Do Modern Browsers Still Put Spaces Between Inline Block If There Is Whitespace
Flex Direction: Row-Reverse in React-Native
How to Create a 'Parallelogram' Shape in CSS with a Straight Side
CSS - Fonts Render Differently in Firefox and Chrome
Rotating 90 Degrees in CSS in IE8 and Lower
How to Avoid Double Border from the Multiple <Li>
Create a Button with Right Triangle/Pointer
CSS Spread <Li> Horizontally Across <Ul>
Image Button Displaying 'Submit Query' Over the Top of Image in Firefox
Does Chrome Have Issue with Setting A:Visited CSS Properties
Box-Sizing: How to Get Rid of the Scrollbar Padding in Firefox