屏幕分辨率小于通用尺寸时导航和徽标问题

Question

我的标题如下：

<header id="wrapper">
    <div class="container clearfix">
    <h1 id="logo" class="alignleft"> <a href="index.html">logo</a> </h1>
    <nav class="alignright">
      <ul id="nav">

       <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>

      </ul>
    </nav>
    <div class="clear"></div>
  </div>
</header>

和css定义中的导航

ul#nav {
margin-top: 30px; 
margin-right: 50px;
}



ul#nav li { float:left; }
ul#nav li a { 
color:#9a9a9a; 
font-family: "champagne__limousinesbold", Arial, Helvetica, sans-serif; 
font-size:18px; 
font-weight:600; 
text-decoration:none; 
 margin:0px 0px 0px 15px; 
 display:inline-block; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; padding:5px 10px; }
ul#nav li a:hover, ul#nav li a.active { color:#474747;}
ul#nav li.active a { color:#fff; background:#474747; }

因此，当屏幕尺寸合理时，它可以正常工作：

但如果屏幕很小，就会发生这种情况：

有没有办法最小化徽标（缩小）和导航菜单（使字体变小或其他东西），这样就不会发生这种情况？

请查看the fiddle

Answer 1

要使用响应式设计，可以使用两种主要技术： Percents ，浮动和位置：相对。我编辑了你的小提琴来反映这些变化。值得注意的是，我在您的元素上添加了%边距/填充而不是px，将图片容器调整为%尺寸，并在列表中调整了一些css。你可以在这里看到结果： http://jsfiddle.net/NUgEf/5/

Answer 2

总之，是的。您将需要使用媒体查询根据屏幕大小调整CSS。

例如：

@media screen and (max-width : 600px) {
    #logo {
        width: /* New width */
    }

    ul#nav li a {
        font-size: /* New font size */
    }
}

有关媒体查询的更多信息here

Answer 3

这取决于当没有足够空间时菜单要做什么。您可以强制链接在小屏幕上开始包装到单独的行上，而不使用@media规则进行一些更改，如下所示：

h1#logo {
float: left;
margin-left: 10px;
margin-top: 0px;
}
h1#logo a { 
display:block; 
width:239px; 
height:147px; 
text-indent:-9999px; 
text-decoration:none; 
background:url(http://blog.logobee.com/free-logo1.jpg) left top no-repeat;
}

nav.alignright {display: block; overflow: hidden;}

.alignright {
/* float: right; */  /* remove this */
}

这是一个现场演示：http://codepen.io/anon/pen/miFyx