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

时间:2016-04-05 13:44:37

标签: css font-size

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

这是什么意思,它是如何运作的?

4 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:2)

当浏览器不支持时,

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

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

答案 2 :(得分:2)

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

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

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

答案 3 :(得分:1)

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