代码之家 › 专栏 › 技术社区 › nCardot

为什么是!h1元素媒体查询工作所需的重要信息?[副本]

media-queries flexbox css html

nCardot · 技术社区 · 6 年前

的我的媒体查询规则集 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;
    }
}

2 回复 | 直到 6 年前

Temani Afif 6 年前

因为有一种更晚的样式将覆盖它,并且它是上次媒体查询中的样式:

@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;
  }
}