px和rem中的字体大小：为什么要将两者都添加到同一个元素中？

Question

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

这是什么意思，它是如何运作的？

Answer 1

px这里是不支持rem单元的浏览器的后备（IE8是一个值得注意的例子）。

查看rem Can I Use... feature以获取浏览器支持。

任何不支持rem单元的浏览器都会依赖于px单元，从而阻止浏览器将字体大小默认为任意内容。

Answer 2

当浏览器不支持时，

font-size以像素为单位将成为rem的falback。

在这种情况下，如果使用font速记属性，则 IE8 或 IE9 / 10

Answer 3

正如其他人所说，这是一个后备。

注意顺序很重要也很重要，如果两个声明被颠倒过来，那就没有用了。

css声明设置字体大小为16px，然后尝试使用1 rem覆盖它。 如果浏览器不支持rem，则不会发生覆盖。

Answer 4

当其中一个单位没有工作时，它将使用默认的那个...但是如果你用代码写的那样写，并且两个都被允许它将选择最新的一个根据CSS中特异性的规则。