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

Question

我正在使用媒体查询和弹性框来使我的网站做出响应，我认为我在这里有点愚蠢，但说我有包装器的 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;
  }
}

谢谢

Answer 1

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

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

.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，然后针对各种设备修改该UI 成为可能，而不必一直将整个代码复制粘贴到各种媒体查询中，这会增加维护、CSS 的大小并变得更容易出错（即，您将被迫在多个地方进行编辑，您可能会在进行更改时忘记并在某个地方进行编辑，以及各种令人讨厌的东西）。

详细说明一下；当重叠的媒体查询影响某个元素并竞争时，它们也会相互影响。在这种情况下，后一个指定的将是媒体查询生效时显示的。显然，忽略!important标签。这个问题中讨论了关于这个问题的更详细的答案。

此类情况的规则在 CSS级联和继承规则中指定， Mozilla 的开发者网站对此进行了非常详细的解释。

希望能帮助到你！