html - 有没有办法命名媒体查询？

Question

有没有办法命名您的媒体查询？

@media ("AddImageBorderQuery") {

    #Cats {
        border: 5px solid red;
        box-sizing: border-box;
        display: block;
    }
}

提到了类似的东西 here .

我的用例不同于定义类并切换到它们。

如果您需要更多详细信息，我在不同的查询(单页应用程序)后面隐藏了完全不同的设计。然后在这些设计中我想要特定的状态并且我想命名查询以便我可以切换到这些状态。可能会有大量更改，因此我想使用嵌套查询组来组织它们。

我现在使用字典和代码手动执行此操作，但命名媒体查询会简化事情。

@media ("page1") {
    @media ("AddImageBorderQuery") {

        #Cats {
            border: 5px solid red;
            display: block;
        }
    }
}

@media ("page2") {
    @media ("ShowContactForm") {

        #ContactForm {
            display: block;
        }
    }
}

window.showMediaQuery("ShowContactForm");

Answer 1

动态加载媒体查询的一种方法是使用带有 id 的样式标签，例如<style id="app-dynamic-media-query"> ，您可以稍后即时填充/替换哪些内容。您可以使用 document.getElementById 访问该样式标签.