Question

我目前正在为移动设备和小屏幕排序我的网站，而且我对如何调整菜单大小感到困惑。我有8个菜单按钮作为无序列表的一部分，如下所示：

<ul class="menu">
<li class="menubar"><a class="menulink" href="/">Home</a></li>
..
.. total of 8 <li> menu buttons
</ul>

'menulink'类将每个链接设置为128px。到8的时间，它完全符合我的页面宽度1024px。我正在使用@media查询来定位更改，而在移动设备上则希望有两行4个按钮。我想，四个按钮的组合宽度需要等于屏幕宽度。我怎么做到这一点？

我的CSS菜单如下：

.menu{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;}

li.menubar{float:left;}

a.menulink{
display:block;
width:128px;
background-color:#333333;
text-align:center;
padding-top:5px;
padding-bottom: 5px;
text-decoration:none;
text-transform:uppercase;}

Answer 1

我觉得更好的想法是让两台电脑（屏幕更大）更舒适。移动设备（屏幕较小）会以％为单位提供大部分属性（以固定为单位）。如

宽度：80％;

Answer 2

我会制作每个li项目width: 25%。这将使得无论浏览器宽度是多少，您的li将始终为4行。

http://jsfiddle.net/xBwbj/

Answer 3

.menu{
width:100%;
overflow:hidden;
}
.menu li{
width:25%;
overflow:hidden;
float:left;
margin-top:10px;
}

.menu li a{
width:100%;
padding:20px;
font-size:20px;
background:lightgreen;

}

这是 DEMO

现在适合在较小的屏幕上使用@media查询...更改字体大小和填充量以适应较小的屏幕例如

@media screen and (max-width:480px){
  .menu li a{
    padding:8px;
    font-size:16px;
  }
}

调整移动设备的菜单按钮大小

3 个答案: