字体大小属性重复

Question

请您解释一下这段代码的含义

 h1{
    font-size: 36px !important;
    font-size: 3.6rem!important;
  }

或者这个

body {
  background: $backgroundColor;
  font-size: 14px;
  font-size: 1.4rem;
}

为什么有重复的font-size属性？

Answer 1

好的，这是完整的摘要。

rem是在较旧的浏览器（尤其是IE）中不起作用或存在明显故障的单元。 See the CanIUse entry.

CSS允许您多次声明一条规则，最后一条获奖。这通常用于向旧的或不兼容的浏览器提供回退值，新的或兼容的浏览器会也读取该回退值，但会使用最后给出的值然后覆盖。

所以：

.example {
  font-size: 12px;
  font-size: 1.1rem;
  background-color: blue;
  background-color: red;
}

任何浏览器都会将背景颜色确定为红色（而不是蓝色），并且任何最新的浏览器都会将字体大小设置为1.1rem。但是，不了解什么是“ rem”的浏览器将丢弃该规则，并保留先前的规则（12px）。

Answer 2

重复的声明用于回退，以支持较旧的浏览器。

！important声明用于覆盖规则，并认为这不是一个好习惯。

关于您有关字体大小单位的问题-旧版浏览器不支持rem。

MDN对HTML和CSS后备行为有很好的解释：https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

希望有帮助。