1

我目前正在为移动设备和小屏幕整理我的网站，但我有点不知道如何调整菜单的大小。我有 8 个菜单按钮作为无序列表的一部分，如下所示：

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

'menulink' 类将每个链接设置为 128px。乘以 8 倍，它与我的 1024 像素页面宽度完美对齐。我正在使用@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;}
4

3 回答 3

1

我认为让计算机（屏幕更大）和移动设备（屏幕更小）都感到舒适的更好主意是，让你的大部分属性以 % 而不是像素（固定）为单位。
像

宽度：80%；

于 2013-09-11T16:26:56.873 回答
1

我会做每个li项目width: 25%。这样一来，无论浏览器宽度是多少，您li都将始终为 4 行。

http://jsfiddle.net/xBwbj/

于 2013-09-11T16:31:51.777 回答
1 
.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;

}

这是一个演示

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

@media screen and (max-width:480px){
  .menu li a{
    padding:8px;
    font-size:16px;
  }
}
于 2013-09-11T16:44:09.837 回答