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

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

如果你没有添加视口(viewport)，那么添加这个视口(viewport)，它工作正常: <meta name="viewport" content="width=device-width, initial-scale=1.0">

如果在添加视口(viewport)后无法正常工作，请尝试以下代码:

    .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/ )