Question

我有一个网站，其中有一个元素.mainContent，并希望它对不同的设备具有不同的宽度。对于较小的设备，我希望它的宽度为800px，而在台式设备上，我希望它的宽度为1296px。以下是我的CSS规则。问题是最后一个媒体查询规则将覆盖第一个规则，因此台式机设备的宽度始终为800px，我不知道为什么。我按照w3school tutorial的指示进行了操作，但这没用。

.mainContent {
  width: 800px;
  margin-right: 65px;
  float: right;
}

@media only screen and (min-width: 1300px) {
  .mainContent {
    width: 1296px;
  }
}

HTML

<div class="container-fluid">
    <div class="mainContent">
      ...
    </div>
</div>

Answer 1

如果您未添加视口，请添加此视口，它可以正常工作： <meta name="viewport" content="width=device-width, initial-scale=1.0">

如果添加视口后无法使用，请尝试以下代码：


    .mainContent {
        margin-right: 65px;
        float: right;
    }



    @media only screen and (min-width:1300px) {
        .mainContent {
            width: 1296px;
        }

    }

    @media only screen and (min-width:320px) {
        .mainContent {
            width: 800px;
        }

    }

请查看此链接以了解调整媒体查询的流程：（https://www.sitepoint.com/media-queries-width-vs-device-width/）

大型设备的媒体查询会覆盖CSS规则

HTML

1 个答案: