Question

我的侧边栏html看起来像这样：

<div id="sidenav">
    <img id="logo" src="Images/Logo.png">
    <a href="#first">
        <p>Home</p>
    </a>
    <a href="#second">
        <p>What?</p>
    </a>
    <a href="#third">
        <p>Who?</p>
    </a>
    <a href="#fourth">
        <p>Contact</p>
    </a>
</div>

和css：

#sidenav {
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
transition: all 300ms ease 0s;
}

#sidenav a {
padding: 0px 0px 0px 32px;
margin: 0px;
text-decoration: none;
color: #0e1c2c;
display: block;
transition: 0.3s
}

#sidenav a:hover {
color: #ea4e3c;
}

我的想法是使用它：

@media screen and (max-height: 450px) {
#sidenav {
    display: none;
}

但它不起作用。

我的最终目标是当人们在移动设备上查看时完全移除侧边栏，然后可以在页面顶部添加另一个带有徽标的容器。这样，页面有更多的空间让页面呼吸因为它只是一个100％宽度的容器，在另一个容器之上，在另一个容器之上。是否可以在@media括号中对所需的CSS和html进行更改？任何帮助表示赞赏！

Answer 1

你有正确的想法，但有一些事情需要改变。不使用max-height，最好使用max-width。通常，768px被认为是移动宽度与桌面宽度的断点（请记住，用户可以将手机侧身转动并且有一些大型手机）。此外，还有一个缺少大括号。如果你改变了这一切，你最终会得到这个：

@media (max-width: 768px) {
    #sidenav {
        display: none;
    }
}

Answer 2

@media screen and (max-height: 450px) {
 #sidenav { 
display: none;
 }
}

您的代码中唯一可以看到的问题是您没有关闭第一个大括号。

另外，在页面的head中添加以下标记

<meta name="viewport" content="width=device-width, initial-scale=1">

这使浏览器以其屏幕宽度呈现页面宽度。

屏幕太小时如何隐藏侧边栏？没有框架

2 个答案: