在响应式环境中使用 rem 作为字体大小单位时，哪种回退最好? [英] Which fallback is best when using rem as font-size unit in a responsive environement?

问题描述

最近我想知道使用 rem 作为字体大小单位时哪种回退最好.像素似乎合适，但如果您想更改特定媒体查询中的全局字体大小，则需要重新定义每个基于 px 的字体大小.

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; }
}

并且所有字体在桌面上都会放大 1.25 倍.到目前为止一切顺利.

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

但是由于我们需要为 IE8 提供 rem 的替代方案，我们必须使用某种回退，例如:

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; }
}

缺点:通过这样做，我们需要再次重新定义桌面媒体查询中的所有字体大小声明.另一种方法是使用 em 作为后备，但字体大小会复合.

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.

推荐答案

似乎最好使用这个 polyfill https://github.com/chuckcarpenter/REM-unit-polyfill 而不是摆弄回退.

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

这篇关于在响应式环境中使用 rem 作为字体大小单位时，哪种回退最好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！