媒体查询疯狂。当项目显示为无时，如何恢复显示一个元素如果到初始显示类型？

2024-05-10 • 问答

如果遇到以下情况你会怎么解决。

考虑以下问题。您想在匹配媒体查询时隐藏可见元素：

.myElement {
   display: block;
}

和媒体查询来隐藏它：

@media (min-width: 1000px) {
.myElement {
   display: none;
}}

现在，如果你有相反的情况。您希望在匹配媒体查询时显示隐藏元素。

您最初将其设置为不显示：

.myElement {
   display: none;
}

然后有一个您已经使用了一段时间的媒体查询，并且您想显示它以便您使用：

@media (min-width: 1000px) {
.myElement {
   display: block;
}}

但是现在，许多 myElements 现在使用 flex 布局，有些使用块布局，因此媒体查询中断。

是否可以在不知道元素显示类型的情况下进行媒体查询？

@media (min-width: 1000px) {
.myElement {
   display: initial;
}}

除非在元素类上没有设置显示，它怎么知道？因此，您可能会声明该元素现在使用 Flex 但它应该开始不显示而是恢复以前定义的值：

.myElement {
   display: flex;
   display: none;
}

这有意义吗？

由于 .myElement 可以是块或 flex，我假设这些属性是通过其他类应用的。所以我为下面的演示创建了一个 .block 类和一个 .flex 类。

创建另一个类 .hide，用于设置 display: none。

现在使用 JS，只要它与您的媒体查询匹配，就从元素中删除 .hide。这会将元素恢复到之前的状态，无论是 flex 还是 block。

不幸的是，没有方法可以根据您所在的媒体查询删除类，因此需要 JS。

以全屏模式查看：

let mql = window.matchMedia("(min-width: 1000px)");
let elems = document.querySelectorAll('.myElement')
mql.addEventListener("change",(e) => {
if (e.matches) {
    /* the viewport is 1000 pixels wide or more */
    console.log("This is a wide screen — more than 1000px wide.");
    elems.forEach((elem) => {
        elem.classList.remove("hide");
    });
} else {
    /* the viewport is less than than 1000 pixels wide */
    console.log("This is a narrow screen — less than 1000px wide.");
    elems.forEach((elem) => {
    elem.classList.add("hide");
    });
}
});

* {
font-family: sans-serif;
}

.hide {
display: none !important;
}

.myElement {
padding: 5px 10px;
color: white;
}

.block {
display: block;
background-color: #4c40f7;
}

.flex {
display: flex;
background-color: #f74040;
}

<div class="myElement block hide">
    <div class="block">This is block 1</div>
    <div class="block">This is block 2</div>
</div>
<div class="myElement flex hide">
    <div class="flex">This is flex 1</div>
    <div class="flex">This is flex 2</div>
</div>

编辑：

@Vladislav 在评论中给出了更好的建议。如果您通过另一个类将 display: block 或 display: flex 应用于 .myElement，您可以直接在媒体查询中编辑这些类，前提是您知道哪个类正在应用哪个属性。如果您不知道这一点，并且类是动态修改的，那么第一种方法效果更好。

但是如果您确实知道哪些类将应用哪些属性，则根本不需要 JS。您可以简单地执行以下操作：

* {
font-family: sans-serif;
}

.myElement {
padding: 5px 10px;
color: white;
}

.block {
display: block;
background-color: #4c40f7;
}

.flex {
display: flex;
background-color: #f74040;
}

@media (max-width: 1000px) { 

.block,.flex {
display: none;
}

}

<div class="myElement block hide">
    <div class="block">This is block 1</div>
    <div class="block">This is block 2</div>
</div>
<div class="myElement flex hide">
    <div class="flex">This is flex 1</div>
    <div class="flex">This is flex 2</div>
</div>

媒体查询疯狂。当项目显示为无时，如何恢复显示一个元素如果到初始显示类型？

slayerwlt1 回答：媒体查询疯狂。当项目显示为无时，如何恢复显示一个元素如果到初始显示类型？

大家都在问