Верстка, CSS, HTML, SVG

Что такое адаптивная вёрстка

Я так понял, что адаптивная вёрстка - это когда создаешь одну веб страницу под одно разрешение (например, 1920), затем снижаешь каждый раз и создаёшь другие под остальные разрешения. Потом определяешь через скрипт разрешение экрана юзера и выдаёшь ему нужную страницу. Правильно ли я понял?
Ali Kayar
Ali Kayar
103
Адаптивная верстка – это когда сайт подстраивается под любые разрешение экрана, делается это при помощи относительных единиц измерения и @media запросов в css. (Скрипты тут не нужны, разве что для определения именно мобильных устройств, а не размеров вьюпорта, но это нужно не так часто.)

Есть два основных вида адаптивной верстки:

Адаптивная:
-----------------
Определяются ключевые разрешения (обычно их 3-4: мобильные, планшеты, десктопы и если макет больше 1200px еще и большие экраны). Т. е. заморачиваемся только для конкретных разрешений, НО при этом при любом размере окна страница должна быть без прокрутки, для этого задаем для каждого из выбранных разрешений max-width в px и тупо центруем.

Отзывчивая:
------------------
Стоит дороже, т. к. больше возни, но на выходе более качественный результат: верстаем без привязки к каким-то конкретным разрешениям, как только верстка ломается или смотрится плохо – создаем новый @media-запрос и так до самых мобильных (или десктопных, если верстаете mobile-first).

Кстати, mobile-first или нет, не так уж и важно: как правило, макет предоставляют только в одном десктопном варианте, и удобнее и быстрее сверстать его и потом уже адаптировать (конечно, когда делаем разметку, учитываем как это будет выглядеть на мобильных).
Сергей Петухов
Сергей Петухов
15 925
Лучший ответ
Если грубо... это когда Width: 100%; а не 1920px))

При 100% - что бы пользователь не делал, какой бы экран у него не был, всё равно страница будет занимать всю ширину экрана, а не строго установленные пиксели.
NS
Nurlan Sarsenbaev
62 360
Адам Храмов Резиновый дизайн с адаптивным не путайте.
Почти.
1. не под разрешение экрана, а под ширину окна браузера
2. не скрипт, а css media
3. не ты выдаешь под остальные, а страничка сама перестраивается - адаптируется
Вадим Величко
Вадим Величко
27 070