Верстка, CSS, HTML, SVG
Что такое адаптивная вёрстка
Я так понял, что адаптивная вёрстка - это когда создаешь одну веб страницу под одно разрешение (например, 1920), затем снижаешь каждый раз и создаёшь другие под остальные разрешения. Потом определяешь через скрипт разрешение экрана юзера и выдаёшь ему нужную страницу. Правильно ли я понял?
Адаптивная верстка – это когда сайт подстраивается под любые разрешение экрана, делается это при помощи относительных единиц измерения и @media запросов в css. (Скрипты тут не нужны, разве что для определения именно мобильных устройств, а не размеров вьюпорта, но это нужно не так часто.)
Есть два основных вида адаптивной верстки:
Адаптивная:
-----------------
Определяются ключевые разрешения (обычно их 3-4: мобильные, планшеты, десктопы и если макет больше 1200px еще и большие экраны). Т. е. заморачиваемся только для конкретных разрешений, НО при этом при любом размере окна страница должна быть без прокрутки, для этого задаем для каждого из выбранных разрешений max-width в px и тупо центруем.
Отзывчивая:
------------------
Стоит дороже, т. к. больше возни, но на выходе более качественный результат: верстаем без привязки к каким-то конкретным разрешениям, как только верстка ломается или смотрится плохо – создаем новый @media-запрос и так до самых мобильных (или десктопных, если верстаете mobile-first).
Кстати, mobile-first или нет, не так уж и важно: как правило, макет предоставляют только в одном десктопном варианте, и удобнее и быстрее сверстать его и потом уже адаптировать (конечно, когда делаем разметку, учитываем как это будет выглядеть на мобильных).
Есть два основных вида адаптивной верстки:
Адаптивная:
-----------------
Определяются ключевые разрешения (обычно их 3-4: мобильные, планшеты, десктопы и если макет больше 1200px еще и большие экраны). Т. е. заморачиваемся только для конкретных разрешений, НО при этом при любом размере окна страница должна быть без прокрутки, для этого задаем для каждого из выбранных разрешений max-width в px и тупо центруем.
Отзывчивая:
------------------
Стоит дороже, т. к. больше возни, но на выходе более качественный результат: верстаем без привязки к каким-то конкретным разрешениям, как только верстка ломается или смотрится плохо – создаем новый @media-запрос и так до самых мобильных (или десктопных, если верстаете mobile-first).
Кстати, mobile-first или нет, не так уж и важно: как правило, макет предоставляют только в одном десктопном варианте, и удобнее и быстрее сверстать его и потом уже адаптировать (конечно, когда делаем разметку, учитываем как это будет выглядеть на мобильных).
Если грубо... это когда Width: 100%; а не 1920px))
При 100% - что бы пользователь не делал, какой бы экран у него не был, всё равно страница будет занимать всю ширину экрана, а не строго установленные пиксели.
При 100% - что бы пользователь не делал, какой бы экран у него не был, всё равно страница будет занимать всю ширину экрана, а не строго установленные пиксели.
Адам Храмов
Резиновый дизайн с адаптивным не путайте.
Почти.
1. не под разрешение экрана, а под ширину окна браузера
2. не скрипт, а css media
3. не ты выдаешь под остальные, а страничка сама перестраивается - адаптируется
1. не под разрешение экрана, а под ширину окна браузера
2. не скрипт, а css media
3. не ты выдаешь под остальные, а страничка сама перестраивается - адаптируется
Похожие вопросы
- Вопрос по метатегам в адаптивной верстке.
- Мобильная версия или адаптивная версия сайта?
- Общие вопросы к специалистам по стилю верстки.
- Кто занимается фрилансом, (html, css верстка). Как научиться?
- Сложно ли научиться вёрстке?
- Помощь в разработке сайта. (макет, хостинг и домен есть. Не понимаю что делать с версткой и куда ее загружать)
- Дайте достаточно информации про верстку! <3
- При верстке макета сайта в html какую лучше использовать верстку? Блочную или семантическую? Ответ пожалуйста обоснуйте.
- Как сделать, чтобы вёрстка не слетала на разных мониторах
- Поможет ли вёрстка сайтов закрепить новичку знания HTML и CSS? Или лучше вёрсткой заниматься когда всё знаешь?