html - 为什么有些开发者两次定义 font-size 的单位不同？

Question

我使用入门主题开发网站主题，我看到开发人员使用不同的单位两次定义属性，例如:

body,
button,
input,
select,
textarea {
    color: #404040;
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

这背后的原因是什么？

Answer 1

在您提供的示例中，定义的第一个 font-size (16px) 将为不支持的浏览器提供回退rem 单位。 确实支持rem单位的浏览器将使用后者font-size (1rem)，因为它是在首先，因此取代它。

body,
button,
input,
select,
textarea {
    color: #404040;
    font-family: sans-serif;
    font-size: 16px;             /*This is set first and provides a fallback if rem units are not supported */
    font-size: 1rem;             /*This second defintion supersedes the first in supported browsers because it is defined after the first definition */
    line-height: 1.5;
}

这里是 CANIUSE，它详细介绍了浏览器支持等。它实际上非常好，支持明智；它只会在 IE8 或更低版本中失败:http://caniuse.com/rem

这是一篇介绍 REM 单位的好文章: http://www.sitepoint.com/understanding-and-using-rem-units-in-css/