1

我有一个网站，其中有一个元素.mainContent，并希望它对于不同的设备具有不同的宽度。对于较小的设备，我希望它的宽度为 800 像素，而在桌面设备上，我希望它的宽度为 1296 像素。以下是我的 CSS 规则。问题是最后一个媒体查询规则覆盖了第一个规则，所以桌面设备的宽度总是 800px，我不知道为什么。我按照w3school 教程所说的那样做了，但它不起作用。

.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>
4

1 回答 1

0

如果您没有添加视口，请添加此视口，它工作正常： <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/）

于 2019-09-14T14:57:46.497 回答