如何在媒体查询中使用最小宽度答案

【问题标题】：how to use min-width in media query如何在媒体查询中使用最小宽度
【发布时间】：2021-11-03 23:03:16
【问题描述】：

我正在尝试使用媒体查询最小宽度使页面具有响应性。我使用了两个断点，@media only screen and(min-width: 320px) 来显示一些样式，但是另一个断点的另一个规则是冲突的并且覆盖了另一个是#media only screen and (min-width: 998px ）。查看我使用的代码

  @media only screen and (min-width: 320px) {
.header {
    display: flex;
    flex-direction: column;
    height: 100px;
    background-color: black;

}
.xpand {
    padding-top: 30px;
}
.searchBar {
    width: 25%;
}
}
  @media only screen and (min-width:990px) {
.header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;s      
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    display: flex;
    -webkt-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;

}

#xpand {
    display: none;
}
#brand {
    padding-top: 12px;
    padding-left: 25px;
}
.navBar {
    padding-top: 35px;
    padding-left: 25px;
    margin-left: 16.66666666666667%;
}
.user {
    padding-top: 35px;
    padding-left:25px;
    padding-right: 12px;
    margin-left: 20%;
    cursor: pointer;
}
.searchBar {
    -webkt-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: 25px;
    padding-right: 25px;
    margin-left: auto; 
    }

}

我不知道这是否是使用最小宽度的正确方法，请有人告诉我前进的方向。

【问题讨论】：

有什么问题？有时更容易考虑响应式布局的最大宽度。
如何使用最小宽度
您好，您的问题不太清楚。如果您可以改进语法并可能在我们谈论视觉效果时添加一些屏幕截图 - 您看到什么以及您期望看到什么，这将很有用。这是关于如何提出好问题的一个很好的通用资源：嗨，您能否以更清楚易懂的方式重新表述您的问题？这是关于如何在线提出好问题的绝佳资源：catb.org/esr/faqs/smart-questions.html
当我读到它时，如果宽度小于 320，则 \@media 块都不适用。对于 320 到 989，只有第一个 \@media 块适用。对于 990 及更高版本，两个 \@media 块都适用，第二个块在重复规则的情况下生效（在源代码的后面）
如果你想学习最小宽度我很好。我只是不明白你的问题。通常响应式设计会在某些 px 宽度处“中断”。您在哪个 px 看到了错误的结果？是 css 使用最后一条规则覆盖第一条规则：stackoverflow.com/questions/8790321/…

标签： html css

【解决方案1】：

代码的顺序在 CSS 中很重要，这意味着如果有重复的规则，第一个规则将被第二个覆盖，所以当你在不同的地方对同一个类应用样式时请记住这一点你的代码。

min-width 规则将应用于每个高于像素集的分辨率，max-width 规则将应用于每个像素集以下的分辨率。

您可以将两者结合使用：@media screen and (min-width: 320px) and (max-width: 900px)。如果窗口宽于 320 像素，则将应用此媒体查询中的所有规则，但如果窗口宽于 900 像素，则不会应用。

【讨论】：

感谢您的输入，我认为更好的方法是为要用于各种断点的元素添加多个类，而不是将其添加到单个类中
不是真的，如果问题是 flex-direction 被覆盖，只需从 min-width 中删除此规则并添加带有 max-width 的新规则 :)
您回答的第一部分是我的解决方案。你的。

【解决方案2】：

您可以将您的媒体查询与(max-width) 结合起来进行优化并避免重叠。

【讨论】：

【解决方案3】：

问题是两个媒体查询规则同时应用。

当窗口的宽度为 1000 像素时，两个最小宽度查询都被接受，因为 1000 像素 > 320 像素和 1000 像素 > 990 像素。

如果您不想这样做，可以查看max-width 媒体查询。

但是，我得到了一些代码供你使用 min-width：

<html>
  <head>
  <title>Mediaquery test</title>
  <style>
    .test_override {
      background: red;
    }
    .medium, .large {
      display: none;
    }
    @media (min-width: 500px) {
      .medium {
        display: block;
      }
      .test_override {
        background-color: yellow;
      }
    }
    @media (min-width: 900px) {
      .large {
        display: block;
      }
      .test_override {
        background-color: green;
      }
    }
  </style>
</head>

<body>
  <div class="test_override">TEST</div>
  <div class="medium">medium</div>
  <div class="large">large</div>
</body>

</html>

您可以看到，在大于 900 像素的窗口大小上，两个 div（.medium 和 .large）都会显示。

您可以像我为 .test_override div 的背景颜色所做的那样覆盖属性。在这种情况下，代码中规则的顺序确实很重要。

【讨论】：