媒体查询不适用于显示属性

Question

我试图在屏幕宽度大于 1200px 时隐藏菜单栏，并在屏幕宽度小于 1200px 时显示它，但媒体查询没有给出我想要的结果。我正在使用 sass.

这是我的 CSS:

        .icon {
            flex: 0.2;
            align-items: center;
            justify-content: center;
            padding-right: 10px;

            .menubar {
                align-items: center;
                justify-content: center;
                **display: none;**

                i {
                    text-align: center;
                    width: 30px;
                    font-size: 30px;
                    line-height: 2;

                    &:hover {
                        color: $mainColor2;
                        cursor: pointer;
                    }
                }
            }
        }
    }

@media screen and (max-width: 1200px) {

    .icon {
        .menubar {
            **display: flex;**
        }
    }
}

这是我的导航栏 React 组件：

<nav className='navbar' ref={navRef}>
                <div className="icon">
                    <div className="darkmode-button">
                        <DarkMode></DarkMode>
                    </div>
                    <div className="menubar" onClick={() => setToggle(!toggle)}>
                        {toggle ? <i class="fas fa-times" onClick={() => closeNav()} /> : <i class="fas fa-bars" onClick={() => openNav()} />}
                    </div>
                    <div className="language">
                        <Language></Language>
                    </div>
                </div>
            </div>
        </nav>

Answer 1

由于您添加了内容检查器屏幕截图，它显示正在使用不同的选择器应用 display 属性。我想这可能会导致 flex-变体没有足够的 特异性 来打败 none-变体的问题。

您的 display: none 适用于 .navbar .right .icon .menubar，但是你的 display: flex 适用于 .icon .menubar.

我已经写了一个解释为什么这发生在另一个问题之前：

但修复可能只是将 display: flex 也包含在 .navbar { .right { ... } } 中。

媒体查询不适用于显示属性

media query not working with display property

css

sass

媒体查询不适用于显示 属性

media query not working with display property

css

sass

媒体查询不适用于显示属性