html - 媒体查询在第一个屏幕有效，但在下一个屏幕无效

Question

我目前正在努力使我的网站具有响应能力。它被设计在屏幕尺寸约为 1100 像素的 14 英寸笔记本电脑中。为了使其具有响应性，我从小屏幕开始:

@media only screen and (max-width: 399px)

现在，当我转到下一个媒体查询时，没有任何代码真正起作用(但它在 400 像素以下起作用)。

这些是我计划处理的媒体查询:

@media only screen and (min-width: 400px) and (max-width: 767px)
@media only screen and  (min-width: 768px) and (max-width: 991px)
@media only screen and  (min-width: 992px) and (max-width: 1199px)
@media only screen and  (min-width: 1200px) and (max-width: 1399px)

写这些语句有什么问题吗？还是顺序错了？

Answer 1

@media screen and (min-width: 400px) and (max-width: 767px) {

  .content {
    right: 0px !important;
  }


}

@media only screen and (min-width: 768px) and (max-width: 991px) {}

@media only screen and (min-width: 992px) and (max-width: 1199px) {}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {}



@media only screen and (min-width: 1400px) and (max-width: 1599px) {}

@media only screen and (min-width: 1600px) and (max-width: 1799px) {}

@media only screen and (min-width: 1800px) and (max-width: 1999px) {
  /*.content {
    position: absolute;
    right: 310px;
    top: 234px;
    width: 880px;
}

.background-overlay {
    height: 600px;
}
#about h1{
    font-size: 80px;
}
.content .aboutUs {
    padding: 60px 45px 0px 45px;
}
.content .aboutUs div {
    margin-top: 35px;
    height: 382px;
}
.content .aboutUs p {
    margin-right: 32px;
    font-size: 22px;
    line-height: 25px;
    font-weight:400;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    color: #777;
}

}
*/


}

我建议的改进是你有 3 个媒体查询，如下所示:

(最大宽度:640px)

(最小宽度:641px)和(最大宽度:800px)

(最小宽度:801 像素)和(最大宽度:1024 像素)

(最小宽度:1025px)