为什么媒体查询不会为我的移动导航显示 flex？而且我仍然不知道如何正确构建？有什么指导方针建议或建议吗？

Question

我正在尝试建立我的网站。我需要获取我已经制作的网站的现有代码，并使其与移动设备查看兼容。对于移动显示，标题应该转换为不同的格式。当我打开我的手机网站时，该网站仍然正确显示。但是当它达到低于 767 像素的宽度时，移动导航将无法打开并显示弯曲。它只是空白，什么也没显示

我已经用CSS和HTMl检查了所有内容。我一步一步地按照youtube视频说明进行操作，并且必须包含所有内容，但是由于某种原因，它仍然无法在移动设备上正确显示。

我的代码如下

.HTML

<header> 
<div class="mobile">
<ul class="navlist-mob">
<li>
<div class="hamburger">
<span class="topline"></span>
<span class="bottomline"></span>
</div>
</li>
<li><img class="logo" src="./assets/logo.svg" height="38" width="38" alt="Kushal Chaudhari"></li>
<li></li>
</ul>
</div>
<div class="desktop">
<ul class="navlist-desk">
<li><a href="index.html" class = "nav-item-text">About</a></li>
<li><a href="#" class = "nav-item-text">Projects</a></li>
<li><a href="#" class = "nav-item-text">Timeline</a></li>
<li><img class="logo" src="./assets/logo.svg" height="38" width="38" alt="Kushal Chaudhari"></li>
<li><a href="#" class = "nav-item-text">Favourites</a></li>
<li><a href="#" class = "nav-item-text">Blog</a></li>
<li><a href="#" class = "nav-item-text">Contact</a></li>
</ul>
</div>
</header>
<!---------------------------------------------------- navigation ends ----------------------------------------------------->

南海

:root {
--ghost_white: #f8f8ff;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-family: "Open Sans",sans-serif;
font-size: .875rem;
font-weight: 400;
}
body{
background-color: var(--ghost_white);
}
header{
z-index: 999;
position: fixed;
width: 100%;
// background-color: var(--ghost_white);
// apple background
background-color: rgba(0,0,0,0.82);
backdrop-filter: blur(2rem);
height: 3rem;
.logo{
padding: 0.2rem;
}

.mobile{
width: 100%;
//margin: 0 auto;
padding: 0 1.2rem;
//display: none;
.navlist-mob{
padding: 0 3rem;
font-family: "Roboto",sans-serif;
font-size: 0.95rem;
font-weight: 400;
list-style: none; 
display: none;
align-items: center;  
justify-content: space-between;
}
}

.desktop{
width: 100%;
//margin: 0 auto;
padding: 0 1.2rem;
}
.navlist-desk{
padding: 0 3rem;
font-family: "Roboto",sans-serif;
font-size: 0.95rem;
font-weight: 400;
list-style: none; 
display: flex;
align-items: center;  
justify-content: space-between;
.nav-item-text{
display: block;
letter-spacing: 0.07rem;
text-decoration: none;
color: #fff;
}
.nav-item-text:hover {
color: #afd275;
}
}

}


.container {
padding-top: 3rem;
width: 100%;
}
@media screen and(max-width: 767px){
.navlist-mob{
display: flex;
}
.desktop{
display: none;
}
} 

标题在 767 像素后变为空白，当它应该显示移动导航的 flex 时。帮助！！！

Answer 1

看看这是否有帮助： https://codepen.io/panchroma/pen/vYEVQpK

我将第 98 行的 CSS 从

@media screen and(max-width: 767px){
.navlist-mob{
display: flex !important; 
}  

自

@media screen and(max-width: 767px){
.navlist-mob{
display: flex !important;  /* NEW */
}  

您的display：flex; 值被 display： none 的声明所否决;在 CSS 的第 47 行

祝你好运！