html - 屏幕分辨率小于常用尺寸时的导航和徽标问题

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

所以当屏幕尺寸合理大时它工作正常，所以：

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

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

请看一下小提琴

Answer 1

要使用响应式设计，需要使用两种主要技术：Percents、Floats和Position:Relative。我已经编辑了你的小提琴以反映这些变化。值得注意的是，我%在元素上添加了边距/填充而不是像素，调整了图像容器以具有%尺寸，并调整了列表中的一些 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 */
    }
}

更多关于媒体查询的信息在这里

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