This question already has answers here:
Why does the order of media queries matter in CSS?
(2个答案)
去年关门了。
除非添加,否则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;
    }
}

最佳答案

因为有一个稍后的样式将覆盖它,它是最后一个媒体查询中的样式:

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

因此,如果我们只考虑您h1的样式,我们就有了这个CSS:
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;
  }
}

<h1>Natalie Cardot</h1>

因此,当屏幕低于767px时,它也低于1199px这就是为什么不考虑在第一个媒体查询中定义的样式,而必须使用!important。为了避免这种情况,您需要重新排序媒体查询,如下所示:
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;
  }
}

<h1>Natalie Cardot</h1>

09-30 17:28
查看更多