时间戳

首页 > 解决方案 > 重复的字体大小属性

css - 重复的字体大小属性

问题描述

你能解释一下，这段代码是什么意思

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

或这个

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

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

标签： css

解决方案

好的，这是完整的纲要。

rem是一个在旧浏览器（尤其是 IE）中不起作用或存在严重错误的单元。请参阅 CanIUse 条目。

CSS 允许你多次声明一个规则，最后一个获胜。这通常用于为旧的或不兼容的浏览器提供一个后备值，较新的或兼容的浏览器也将读取该值，但随后会用给定的最后一个值覆盖。

所以：

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

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

推荐阅读