html - 如何在媒体查询中使用最小宽度

Question

我正在尝试使用媒体查询最小宽度使页面响应。我使用了两个断点，@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; 
    }

}

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

Answer 1

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

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

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