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

Question

我一直在尝试让我的菜单响应式。 www.treytrumble.com
似乎因为它是固定的，所以在小于笔记本电脑的设备上查看时它无法正确缩放。当屏幕缩放到小于 1,150 像素宽时，我该怎么做才能使菜单看起来像这样？ http://www.adtile.me

HTML

<div class="contactcontainer">
<div class="contactmenu">Trey Trumble<br /><br/>804-513-7704 <br/><br/>
<a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8afef8eff3cafef8eff3fef8ffe7e8e6efa4e9e5e7" rel="noreferrer noopener nofollow">[email protected]</a>" class="font5"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8dcdacdd1e8dcdacdd1dcdaddc5cac4cd86cbc7c5" rel="noreferrer noopener nofollow">[email protected]</a></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 -->

CSS

.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;
}

Answer 1

这很容易实现，但很难解释。您必须使用媒体查询来完成此操作，甚至可能使用 JavaScript。

媒体查询

Chris Coyier 在 CSS-TRICKS 中有一篇非常有趣的文章，解释了响应式菜单的各种概念:http://css-tricks.com/responsive-menu-concepts/

至于主要问题，您绝对可以使该菜单响应式，不过，我不建议您为移动设备使用与桌面完全相同的布局，因为这将是一个问题由于屏幕太小，我建议让它像普通菜单一样一直到顶部，响应灵敏，您也可以将其固定到顶部并在顶部添加一个 padding-top剩余的元素，这样它们就不会低于菜单。

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

flexbox

您还可以采用另一种方法，但根据您对某些浏览器的支持，我建议或不使用 Flexbox。如果您将导航显示为 display: flex 并明智地调整 CSS，您可以实现漂亮的组合，但再次记住，这是一个稍微新的 CSS3 属性，主要是 Internet Explorer 最近才开始支持它。

有关 Flexbox 的更多信息可以在这里找到:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

响应式设计

如果您是响应式/自适应设计的新手，那么先生，您有很多工作要做，但是，幸运的是，今天有大量的免费和/或付费资源可以为您提供一个很好的主意做什么。

我发现 Team Tree House 上的这篇文章非常有用:http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

您可以从那里继续并开始寻找其他资源，其中一些资源在此答案中提到:

• 媒体查询
• flex 盒

其他提示

如果您想让您的菜单响应式，您还需要使您的网站响应式，请确保您具备所有这些:

• 响应式视口(viewport)标签
• HTML5 文档类型
• 计划(网格系统、媒体查询、Flexbox 等)
• 针对不受支持的内容的后备