我試圖在螢屏寬度大于 1200 像素時隱藏選單欄，并在螢屏寬度小于 1200 像素時顯示它，但媒體查詢沒有給出我想要的結果。我正在使用 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>
uj5u.com熱心網友回復：
由于您已添加內容檢查器螢屏截圖，因此它顯示display正在使用不同的選擇器應用該屬性。我想這可能會導致一個問題，即flex-variant 沒有足夠的特異性來擊敗none-variant。
您的display: none適用于.navbar .right .icon .menubar，但您的display: flex適用于.icon .menubar。
我之前在另一個問題上寫了一個解釋為什么會發生這種情況：CSS Works on custom Tag but not on DIV?
但修復很可能也只是將display: flex內部包裹起來.navbar { .right { ... } }。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399988.html