Отзывчивый шаблон дизайна

Question

Я новичок в отзывчивом дизайне, я хочу создавать гибкие меню, изображения, блоки и каждую вещь в шаблонах веб-сайта.

Я готов, что все ширина должна быть в процентах, я сделать этот пример

http://jsfiddle.net/hQBR6/

Как я могу сделать форму с его вводом реагировать на разный размер экрана, не выходя ниже ул ??

Answer 1

Проблема заключается в том, что вы смешиваете маржу, установленную в PX, и ширину, установленную в%. Когда размер экрана изменяется ниже определенных размеров, для элементов с запасом не хватает места, размер которого большой и вход падает ниже.

Вы должны установить свои поля в% - если вы работаете над реперсонирующим дизайном.

Вот как я изменил свой код, чтобы сделать его работу:

ul#menu{ 
    border:1px solid black; 
    display: inline-block; 
    float:left; 
    max-width:50%; 
    margin-left:5%; /* changed to percentage */ 
    margin-top:36px; /* should be percentage as well*/ 
    list-style-type:none; 
} 
ul#menu li{ 
    display: inline-block; 
    float:left; 
    margin-right:36px; /* should be percentage as well*/ 
    width: auto; 
} 

#header form { 
    display: inline-block; 
    margin-right:1%; /* changed to percentage */ 
    float:right; 
    width:10%; 
} 

#header form input{ 
    margin-top:28px; 
    background-color: #e0e0e0; 
    border-radius:4px; 
    border:none; 
    height: 26px; 
    color:#a6a6a6; 
} 

Примечания: Я играл только с левыми/правыми краями и реальных размерами до вас.

Надеется, что это помогает

Answer 2

Для вашего быстрого старта перейдите по ссылке ниже вы найдете хорошие примеры, чтобы начать адаптивный дизайн.

http://twitter.github.com/bootstrap/