3

最近我想知道当使用 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 作为后备，但随后字体大小会复合。

很高兴听到您对此的建议。

4

4 回答 4

2

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

于 2013-11-04T23:46:05.630 回答
1

好吧，我已经阅读了所有评论，但我没有看到任何问题的答案....使用 rem 单位时，作为后备有什么更好的选择？我认为px是最好的为什么？因为你选择 rem 单位好吗？这意味着根元素，这意味着它将根据 html { font-size: (define here a font size) 对它的大小进行调整？那么如果 em 基于父元素，那么如果父元素的字体大小为 18，并且我想将字体大小设置为 24px 到 h3，那么它将是 24/18 而不是 24/16（默认字体大小/ 其他字体大小设置为 html 标记）如果我错了，请纠正我因此，如果后备在 em 中，它们将被计算到父 div，这意味着您可能在整个地方都有不同的字体大小。

稍后编辑：我在 html 标签上设置 rem 单位是错误的......但这只是我的意见。

于 2013-10-25T11:11:50.023 回答
1

为什么要使用 pollyfill 并将更多的 js 提供给处理 js 最慢的浏览器？

您应该使用像 sass 这样的预处理器。可以用来添加 ox fallback，但我喜欢在.lt-ie9 And use conditional comments 下制作一个排版部分，将其设置为我的 html 标签。由于 ie 的不同样式表再次在最慢的浏览器上抛出更多的 http 请求。

于 2015-02-25T16:41:12.927 回答
0

字体大小以点（最好，自古腾堡以来）或像素定义。Ems 是相对于当前字体大小的，所以使用它们来表示字体大小是圆形的；使用 root ems 同上。

于 2013-10-25T12:05:01.447 回答