媒体查询是否继承媒体查询中未指定的值？

我正在使用媒体查询和弹性框来使我的网站做出响应，我认为我在这里有点愚蠢，但说我有包装器的 css 类，如下所示：

 .wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
 }

(max-width: 450px) 的媒体查询继承什么值？或者它不继承任何？

@media only screen and (max-width: 450px) {
  .wrapper {
    height: 50px;
  }
}

Thanks

媒体查询“继承”all原始元素的属性，并在实际媒体查询中应用指定的更改。

因此，您的代码片段有效地转换为：

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
 }

@media only screen and (max-width: 450px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;

    /* And then your changes, which override earlier properties */
    height: 50px;
  }
}

这使得只需设计一次 UI，然后修改即可that适用于各种设备的 UI，而无需始终将整个代码复制粘贴到各种媒体查询中，这会增加维护、CSS 的大小并变得更容易出错（即，您将被迫在多个位置进行编辑，您进行更改时可能会忘记并在某个地方进行编辑，以及各种令人讨厌的东西）。

详细说明一下；当重叠的媒体查询影响某个元素并竞争时，它们也会相互影响。在这种情况下后者指定媒体查询生效时显示的就是其中之一。无视!important标签，显然。关于这个问题的更详细的答案在this https://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap所以问题。

CSS 中指定了此类情况的规则级联 and 遗产规则，这些规则在Mozilla 的开发者网站 https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance.

希望能帮助到你！