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标签。关于这个问题的更详细的答案在this SO问题中进行了讨论。

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

希望它有所帮助！

Answer 2

媒体查询中的CSS规则“继承”未被其他规则覆盖的所有参数值，这些规则适用于样式表中上面它的同一选择器。所以在你的情况下，height

除外
（实际上，他们没有继承，但常规参数值只是继续适用于所有大小，并且不会被不包含该特定参数的媒体查询覆盖< / p>

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

2 个答案: