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访问该样式标签。

是否可以命名媒体查询？

1 个答案: