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

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的浏览器提供后备。支持单位的浏览器将使用后者( )，因为它是在第一个单位之后定义的，因此会取代它。remremfont-size1rem

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/