Question

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

HTML

<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 -->

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

你可以从那里开始寻找其他资源，其中一些资源在这个答案中提到：

媒体查询
Flexbox的

其他提示

如果您想让自己的菜单响应，还需要让您的网站快速响应，确保您拥有所有这些：

自适应视口标记
HTML5 doctype
计划（网格系统，媒体查询，弹性箱等）
不受支持的内容的后备补丁

Answer 2

当然是的，

使用媒体查询选择要与其对齐的分辨率。

在查询中定义您的类并将其应用于菜单。

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

2 个答案:

媒体查询

Flexbox的

响应式设计

其他提示