css - 媒体查询会继承媒体查询中未指定的值吗？

Question

我正在使用媒体查询和 flex box 来使我的网站响应，我觉得我在这里有点笨但是说我有包装器的 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 标签。在 this 中讨论了关于这个问题的更详尽的答案。所以问题。

此类情况的规则在 CSS 级联 和继承 规则中指定，这些规则在 Mozilla's Developer website 中有详细解释。 .

希望对您有所帮助!