Question

除非我添加！important，否则h1元素的媒体查询规则集不会生效。为什么它不能独立工作？

媒体查询：

/* Small devices (landscape phones) */
@media screen and (max-width: 767px) {
    h1 {
        font-size: 1.6em !important;
    }
}

/* Tablets */
@media screen and (max-width: 991px) {
    h1 {
        font-size: 1.7rem;
    }
}

/* Small laptops */
@media screen and (max-width: 1199px) {
    h1 {
        font-size: 2rem;
    }
}

Answer 1

因为后来的样式会覆盖它，而且它是最后一个媒体查询中的样式：

@media screen and (max-width: 1199px) {
  h1 {
    font-size: 2rem;
  }
}

因此，如果我们只考虑h1的样式，我们就有这个CSS：

＆＃13;

h1 {
  color: #2d3c49;
  text-transform: uppercase;
}

h1 {
  font-weight: 200;
  font-size: 2.6em;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 1.6em;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 1.7rem;
  }
}

/* This one will always win the race !*/
@media screen and (max-width: 1199px) {
  h1 {
    font-size: 2rem;
  }
}

＆＃13;

<h1>Natalie Cardot</h1>

＆＃13;

因此，当您的屏幕低于767px时，它也低于1199px，这就是为什么不考虑您在第一个媒体查询中定义的样式而且您有义务使用!important。为避免这种情况，您需要重新排序媒体查询，如下所示：

＆＃13;

h1 {
  color: #2d3c49;
  text-transform: uppercase;
}

h1 {
  font-weight: 200;
  font-size: 2.6em;
  margin-bottom: 0;
}


@media screen and (max-width: 1199px) {
  h1 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 991px) {
  h1 {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 1.6em;
  }
}

＆＃13;

<h1>Natalie Cardot</h1>

＆＃13;

Answer 2

h1标签有默认大小，为了覆盖你需要的！重要

为什么h1元素媒体查询需要重要？

2 个答案: