кнопки изменения размера для мобильных устройств

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

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

Answer 2

Я думаю, что лучшая идея для создания его удобным для обоих компьютеров (с большим экраном) & мобильных устройств (с меньшим экраном) является то, что дают большую часть атрибута в% не в пикселях (которые фиксированы).

ширина: 80%;

Answer 3

Я бы сделал каждый li артикул width: 25%. Это позволит сделать так, что независимо от того, что ширина браузера, ваш li всегда будет в рядах 4.

http://jsfiddle.net/xBwbj/