时间戳

首页 > 解决方案 > 有没有办法命名媒体查询？

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

问题描述

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

@media ("AddImageBorderQuery") {

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

这里提到了类似的东西。

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

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

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

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

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

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

        #ContactForm {
            display: block;
        }
    }
}

window.showMediaQuery("ShowContactForm");

标签： htmlcss

解决方案

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

推荐阅读