Question

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

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

现在，当我进入下一个媒体查询时，实际上没有任何代码有效（但是它在400px以下有效）。

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

@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个媒体查询：

（最大宽度：640像素）

（最小宽度：641像素）和（最大宽度：800像素）

（最小宽度：801像素）和（最大宽度：1024像素）

（最小宽度：1025px）

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

1 个答案: