不为“.nav__btn”类应用媒体

Question

请解释一下这个问题；我想要“.nav__btn”类显示为无，其中 min-width: 768px;但它不起作用

--------------------媒体代码------------------------

@media (min-width: 768px) {
    .nav__btn {
        display: none;
    }
}

-------------------------样式代码---------------------- -

.nav__btn {
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 2.2rem;
    cursor: pointer;
}

我想要“.nav__btn”类显示为无

Answer 1

将脚本放在结束标记之前，以确保执行 JavaScript 代码。

这样，它将监听窗口大小调整事件并相应地调整“.nav__btn”元素的显示属性。

  <script>
            window.addEventListener('resize', function() {
                var navBtn = document.querySelector('.nav__btn');
                if (window.innerWidth >= 768) {
                    navBtn.style.display = 'none';
                } else {
                    navBtn.style.display = 'flex'; // Or whichever default display value you want
                }
            });
        </script>

Answer 2

当规则集具有相同的特异性时，后面的规则在级联中“获胜”。

媒体查询中的规则在超过 768 像素时将其设置为

display: none

，然后其后的规则将其设置为

display: flex

无条件。

更改规则集的顺序。