Как создать адаптивный дизайн?

Question

[vladislavik95]

Объясните чайнику как создавать адаптивный сайт. У меня есть созданный шаблон сайта для ноута под расширением 1920х1200. Но что делать дальше ---

а) отрисовывать этот дизайн под каждое устройство?(смартфон, планшет, ноут, ПК)
б) Отрысовывать под каждое расширение ? но сколько таких расширений?
в) Использовать фреймворки ? Но какие и как они работают?

Answer 1

[Константин Давыдов]

Если по хорошему, то всё зависит от того, сколько у Вас будет контрольных точек.

Допустим минимальная ширина сайта равна 320px, значит начальных макет будет шириной 320px. Первая контрольная точка у нас на ширине 768px, значит второй макет будет шириной 720px, ну и путь последняя контрольная точка у нас будет 1024px, значит последний макет будет 1024px.

Answer 2

[Дмитрий]

Вариант В - getbootstrap.com (на русском http://bootstrap-3.ru)
естественно нужно будет править media под себя

Comments

[Дмитрий]

если точнее, сразу про сетку читайте bootstrap-3.ru/css.php#grid

[vladislavik95]

Дмитрий Крымцев: спасибо , как раз уже изучаю)

[Игорь Немчин]

vladislavik95: лучше использовать uikit ибо он в отличие от бутстрапа не содержит классов без префиксов, да и гораздо проще в использовании.

Answer 3

[Хикмат Абдунабиев]

Адаптивный и мобильный дизайн с CSS3 Media Queries

Answer 4

[Ваня Зюзгин]

В любом случае отрисовать придется под популярные устройства и проработать UI, даже с бутстрапом Вы должны понимать, как все будет выглядеть на малых экранах.