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/

为什么有些开发人员使用不同的单位定义两次字体大小？

1 个答案: