This question already has answers here:
Why does the order of media queries matter in CSS?
(2个答案)
去年关门了。
除非添加,否则
媒体查询:
因此,如果我们只考虑您
因此,当屏幕低于
(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>