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

【问题标题】：CSS rule overwritten by media queries for larger devices大型设备的媒体查询覆盖 CSS 规则
【发布时间】：2019-09-17 00:46:46
【问题描述】：

我有一个网站，其中有一个元素 .mainContent，并希望它对于不同的设备具有不同的宽度。对于较小的设备，我希望它的宽度为 800 像素，而在桌面设备上，我希望它的宽度为 1296 像素。以下是我的 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>

【问题讨论】：

它按预期工作，刚刚尝试过
@SagarV 不，这里打错字了。屏幕尺寸应超过 1300 像素。
@CarlBinalla 当我在 Chrome 中切换设备工具栏并选择宽度为 360 像素的 Galaxy S5 时，元素的宽度为 1296 像素，因此媒体查询覆盖了主要规则。我做错了什么？
你能做一个sn-p吗？
你是否在 head 标签中添加了<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">？

标签： css media-queries

【解决方案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/)

【讨论】：