css - css: margin 属性同时使用 px 和 rem

Question

考虑以下 css 类定义，取自 wrpdress 212 主题：

.entry-header {
   margin-bottom: 24px;
   margin-bottom: 1.714285714rem;
}

为什么margin-bottom定义两次，一次是单位px，一次是rem单位？浏览器会选择哪个单位？

score 4 · Accepted Answer

我认为是因为rem并非所有浏览器都支持。

查看caniuse详细的浏览器支持。

因此，他们将其定义px为旧版本和rem支持它的版本。

score 1 · Accepted Answer

有两种字体大小声明，因为开发人员更喜欢浏览器使用“rem”单位，但如果浏览器不支持 rem，它将回退到使用标准的“px”单位。

不支持“rem”单位的旧浏览器将忽略该声明。

较新/当前的浏览器将使用“级联”并使用最后声明的任何度量单位。在这种情况下，使用 'rem's 进行尺寸调整。

score 0 · Accepted Answer

并非所有浏览器都支持该rem单元 - 直到现在我才听说过！不支持它的浏览器将使用该px值。

score 0 · Accepted Answer

rem 是 CSS3 中的一个新单元，它定义了根元素（通常是文档的 HTML 元素）的字体大小。由于它是一个新单位，并非所有浏览器都支持它，请参阅http://caniuse.com/#feat=rem，因此提供 px 值作为后备。如果支持 rem，将使用该值，否则使用 px 值。

有关 CSS 长度单位的详细信息，请参阅https://developer.mozilla.org/en-US/docs/CSS/length。

score 0 · Accepted Answer

用简单的话...

Px用于在所有浏览器而不是 IE 中进行修复。因为IE不具备使用浏览器功能改变大小的能力。

Em整个无法在 IE 中调整文本大小一直令人沮丧。为了解决这个问题，我们可以使用 em 单位。

CSS3 引入了一些称为“rem”的新单位，它代表“root em”。em 单位与父级的字体大小相关，这会导致复合问题。rem 单位是相对于根元素或 html 元素的。

5 回答 5