Question

我正在尝试使用媒体查询min-width使页面响应。我使用了两个断点，@ media only screen和（min-width：320px）来显示一些样式，但另一个断点的另一个规则是冲突的，并且覆盖另一个#media only screen和（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; 
    }

}

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

Answer 1

代码的顺序在CSS中很重要，这意味着如果存在重复的规则，第一个规则将被第二个规则覆盖，因此当您在不同位置的同一个类上应用样式时请记住这一点。你的代码。

min:width规则将适用于高于设置的像素的每个分辨率，max-width规则将应用于像素集下方的每个分辨率。

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

Answer 2

您可以将媒体查询与{{1}}结合使用，以对其进行优化并避免重叠。

Answer 3

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

当窗口的宽度为1000px时，接受min-width-queries，因为1000px＆gt; 320px和1000px> 990px。

如果您不想这样，可以查看max-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>

您可以在窗口尺寸＆gt;上看到900px显示两个div（.medium和.large）。

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

如何在媒体查询中使用min-width

3 个答案: