Which fallback is best when using rem as font-size

问题:

Recently I was wondering which fallback is best when using rem as font-size unit. Pixel seems appropriate, but if you want to change the global font-size in a specific media-query, every single px-based font-size needs to be redefined.

Here’s an example: Without any fallback for older browsers we could use

/* Mobile Styles */

html { font-size: 1rem; }
h1 { font-size: 2rem; }

/* Specific desktop styles */

@media only screen and (min-width: 992px) {
    html { font-size: 1.25rem; }
}

and all fonts would be enlarged by factor 1.25 on desktops. So far so good.

But as we need to provide IE8 with an alternative to rem, we have to use some sort of fallback, e.g.:

/* Mobile Styles */

html { font-size: 16px; font-size: 1rem; }
h1 { font-size: 32px; font-size: 2rem; }

/* Specific desktop styles */

@media only screen and (min-width: 992px) {
    html { font-size: 20px; font-size: 1.25rem; }
    h1 { font-size: 40px; font-size: 2rem; }
}

The downside: By doing so we need to redefine all font-size declarations in the desktop media-query again. The alternative would be to use em as fallback, but then the font size compounds.

Would be thrilled to hear your suggestions on this.

回答1:

Seems best to use this polyfill https://github.com/chuckcarpenter/REM-unit-polyfill instead of fiddeling with fallbacks.

回答2:

well i've read all the comments but i don't see any answer to the question.... what's it's better as fallback when using rem units ? I think px is the best why ? because you go for rem units ok ? that means root element so that means will take it's size based on html { font-size: (define here a font size) right ? then if em is based on the parent element then if the parent element is a font-size of 18 and i want to set the font size to 24px to a h3 then it would be 24/18 instead of 24/16 ( default font size / other font size set to html tag) correct me if i'm wrong So if the fallback is in em they will be calculated to the parent div and that means you might have different font sizes all over the place.

Later Edit: I setting rem unit on html tag is wrong... but that's only my opinion.

回答3:

Why use a pollyfill and feed even more js into the slowest browsers at handling js?

You should use a preprocessor like sass. Can be used to just add ox fallback, but I like to make a typography section under .lt-ie9 And use conditional comments to set that to my html tag. As different stykesheets for ie is again to throw more http reqs at thr slowest browser.

回答4:

Font sizes are defined in points (preferably, since Gutenberg) or pixels. Ems are relative to the current font size, so using them for the font size is circular; using root ems ditto is ditto.