最近我想知道使用 rem 作为字体大小单位时哪种后备最好。像素似乎很合适，但如果您想更改特定媒体查询中的全局字体大小，则需要重新定义每个基于 px 的字体大小。
这是一个例子：如果没有任何旧浏览器的后备，我们可以使用
/* 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 倍。到目前为止，一切都很好。
但由于我们需要为 IE8 提供 rem 的替代方案，因此我们必须使用某种后备方案，例如：
/* 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 作为后备，但随后字体大小会复合。
很高兴听到您对此的建议。
似乎最好使用这个polyfillhttps://github.com/chuckcarpenter/REM-unit-polyfill而不是摆弄后备方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
