当我扩展窗口时，移动导航图标消失就可以显示桌面导航，但是当它大于指定的屏幕宽度时，mobileNavSections div不会消失。切换功能按预期工作。
function displayMobileNav(){
var x = document.getElementById("mobileNavSections");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}.mobileNav {
display: none;
}
#mobileNavSections {
display: none;
background-color: white;
position: fixed;
z-index: 1;
margin-top: 60px;
width:100%;
height: flex;
}
#mobileNavSections a {
display:block;
color: black;
margin: 5%;
text-decoration: none;
font-size: 17px;
opacity:0.5;
}
#mobileNavSections a:hover {
opacity: 1;
}
@media only screen
and (max-width: 768px){
.mobileNav{
display: block;
}
.mobileNav img {
height: 30px;
}
.mobileNav:hover {
cursor: grab;
}
}<nav>
<div class="mobileNav" onclick="displayMobileNav()">
<img src="images/menuicon.svg">
</div>
</nav>
<div id="mobileNavSections">
<a href="#About">About</a>
<a href="#Contact">Contact</a>
<a href="#">中文</a>
</div>添加此CSS媒体查询应完成隐藏您未用JS覆盖的导航部分
@media screen and (min-width: 769px){
#mobileNavSections{
display:none;
}
}
放在一起放CSS时，我绝对会推荐更多的移动设备。媒体查询和替代会很快变得令人头疼。这里有一些技巧和进一步的阅读：
移动优先CSS的编写如下：
手机样式和所有屏幕尺寸通用的样式
（无媒体查询）
[icon name = icon-arrow-down]
最小宽度断点的媒体查询
例如@media（最小宽度：400px）
[icon name = icon-arrow-down]
媒体查询的最小宽度断点稍大
例如@media（最小宽度：600px）
[icon name = icon-arrow-down]
具有更大的最小宽度断点的媒体查询
例如@media（最小宽度：960px）
一种思考的方法是从移动基础开始，然后逐步建立（或者从宽度上考虑）。
https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句