如何在带有 javascript 条件的媒体查询中使用 css？

Posted 2023-03-06

【中文标题】如何在带有 javascript 条件的媒体查询中使用 css？

【英文标题】：How to use css in media-queries with a javascript condition?

【发布时间】：2021-11-15 02:18:33

【问题描述】：

我正在使用此组织结构图https://codepen.io/erinesullivan/pen/LLoXoL。基本上我想做的是在条件为真时使用媒体查询中的 css 类。有什么简单的方法吗？如果条件为真，这就是我必须使用的类的样子。

@media only screen and ( min-width: 64em ) 

    ol.organizational-chart 
        margin-left: -1em;
        margin-right: -1em;
    

    /* PRIMARY */
    ol.organizational-chart > li > div 
        display: inline-block;
        float: none;
        margin: 0 1em 1em 1em;
        vertical-align: bottom;
    

    ol.organizational-chart > li > div:only-of-type 
        margin-bottom: 0;
        width: calc((100% / 1) - 2em - 4px);
    

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div 
        width: calc((100% / 2) - 2em - 4px);
    

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div 
        width: calc((100% / 3) - 2em - 4px);
    

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div 
        width: calc((100% / 4) - 2em - 4px);
    

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div 
        width: calc((100% / 5) - 2em - 4px);
    
    /* SECONDARY */
    ol.organizational-chart > li > ol 
        display: flex;
        flex-wrap: nowrap;
    

    ol.organizational-chart > li > ol:before,
    ol.organizational-chart > li > ol > li:before 
        height: 1em!important;
        left: 50%!important;
        top: 0!important;
        width: 3px!important;
    

    ol.organizational-chart > li > ol:after 
        display: none;
    

谢谢。

【问题讨论】：

在不同的类中编写 CSS。并且仅在条件为真时添加该类？

【参考方案1】：

这样的表达方式适合这个任务：

window.matchMedia("(min-width: 500px)");

检查：

const mq = window.matchMedia( "(min-width: 500px)" );
    if (mq.matches) 
        console.log('window width is at least 500px');
     else 
        console.log('window width is less than 500px')
    

【讨论】：

您好 Serg，感谢您的回答。实际上，如果另一个条件为真，我必须使用媒体查询中的代码。特别是，我有一个数组，如果这个数组有超过 5 个元素，我想使用媒体查询中的代码。我认为 matchMedia 无法解决我的问题：/