Html 是否可以使我的固定菜单响应？

我一直在努力使我的菜单响应。 似乎因为它是固定的，所以在比笔记本电脑小的设备上观看时，它无法正常缩放。当屏幕缩放到小于1150px的宽度时，如何使菜单显示为这样

HTML

当然是的

使用介质查询选择要捕捉到的分辨率

---

在查询中定义您的类并在菜单中应用它。

这很容易实现，但很难解释。您必须使用媒体查询来实现这一点，甚至可能是JavaScript

媒体查询 Chris Coyier在CSS-TRICKS中有一篇非常有趣的文章，在这里解释了响应菜单的各种概念：

至于主要问题，你完全可以让菜单响应，但是，我不建议你使用与移动桌面完全相同的布局，因为这会是一个问题，因为屏幕太小，我建议让它像普通菜单一样一直到顶部，响应性强，您还可以将其固定到顶部，并向其余元素添加填充顶部，以便它们不会位于菜单下方

如果您决定菜单应始终位于顶部，请确保向nav或div元素添加z-index属性，以便没有其他属性穿过它

柔性箱 你也可以采取另一种方法，但这取决于你对某些浏览器的支持，我建议你还是不要使用Flexbox。如果您将导航显示为display:flex，并在CSS方面对其进行调整，您可以实现漂亮的组合，但请再次记住，这是一个稍微新的CSS3属性，主要是Internet Explorer最近才开始支持它

有关Flexbox的更多信息，请访问：

响应性设计 如果您对响应式/自适应设计还不熟悉，那么先生，您有很多工作要做，但是，幸运的是，今天有大量免费和/或付费资源，可以让您非常清楚该做什么

我发现这篇关于团队树屋的文章非常有用：

您可以从那里继续寻找其他资源，其中一些资源在回答中提到：

媒体查询 柔性箱 其他提示 如果你想让你的菜单响应，你还需要让你的网站响应，确保你有所有这些：

响应视口标记 HTML5 doctype 计划网格系统、媒体查询、flexbox等 不支持内容的回退

---

为什么只是菜单？该站点没有响应，没有元视口标记，正在使用旧的jQuery，没有使用html5，等等。如果您在移动设备上查看，它看起来会很好，用户可以按一下缩放。

<div class="contactcontainer">
<div class="contactmenu">Trey Trumble<br /><br/>804-513-7704 <br/><br/>
<a href="mailto:trey@treytrumble.com" class="font5">trey@treytrumble.com</a><br/><br/><a      
href="images/Trey Trumble Resume.pdf" class="font5">Resume</a>
</div><!-- end .contactmenu -->

</div><!-- end .contactcontainer -->
<div class="container">

<div class="sidebar1">
<table width="120" height="104" border="0">
<tr>
<th scope="col"></th>
</tr>
</table>
<ul class="nav">
  <li><img src="images/logo.jpg" width="180"/></li>
  <li><a id="webbutton" class="nav">WEB DESIGN</a></li>
  <li><a id="printbutton" class="nav">PRINT DESIGN</a></li>
  <li><a span class="contactbutton">CONTACT &amp; RESUME</span></a></li></ul>
</div><!-- end .sidebar1 -->

.content ul, .content ol { 
padding: 0 15px 15px 40px;
}


ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px; 
position:fixed;
}
ul.nav li {
border-bottom: 1px solid #666;
letter-spacing: 2px;
font-family: "Helvetica", Arial, sans-serif;
cursor: pointer;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #fff;
inline-box-align:initial;
color:#F60;

}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background:#F60;
color: #FFF;
font-family: "Helvetica", Arial, sans-serif;
letter-spacing: 2px;
font-size: 9px;
}