有没有办法命名媒体查询? [英] Is there a way to name a media query?

问题描述

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

Is there a way to name your media queries?

@media ("AddImageBorderQuery") {

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

在此处提到了类似的内容.

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

My use case is different than defining classes and switching to them.

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

If you want more details I have completely different designs hidden behind different queries (single page application). Then in those designs I want to have specific states and I want to name the query so I can switch to those states. There can be large number of changes so I want to use nested query groups as a way to organize them.

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

I'm doing this manually now using a dictionary and code but naming media queries would simplify things.

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

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

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

        #ContactForm {
            display: block;
        }
    }
}

window.showMediaQuery("ShowContactForm");

推荐答案

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

One approach to load media queries dynamically is by having a style tag with id, e.g. <style id="app-dynamic-media-query">, which content you can fill/replace later on the fly. You can access that style tag using document.getElementById.

这篇关于有没有办法命名媒体查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！