@Lexshpin

Как правильно верстать адаптивно?

Всем привет. Я начинающий веб-разработчик. Сверстал свой первый "сложный" веб-сайт и адаптировал его. Проблема в том, что при адаптации в консоли разработчика сайт выглядит нормально, потом обновляешь страницу - и уже нет. Правишь. Потом снова обновляешь, опять все поехало. Так и танцевал с бубном, пока все не стало выглядеть ок на всех разрешениях. Открыл сайт на iPhone XR и на широком экране (сам верстал на 13") - все поехало. Делал я это долго и мучительно.
Вопрос: как делать адаптивную верстку быстро, безболезненно и так, чтобы я был уверен, что все будет выглядеть ок на всех расширениях?
P.S. Если вопрос задан некорректно или я дал недостаточно информации - укажите на это, плз.
Приложил код media.scss
  • Вопрос задан
  • 2524 просмотра
Решения вопроса 2
Aetae
@Aetae
Тлен
Чтобы верстать адаптивно - в первую очередь надо верстать адаптивно.
Размеры все должны быть по максимуму относительными.
Флексы, гриды, проценты, vh, vw, em.
Медиа-запросы же нужно использовать только тогда, когда нужно поменять структуру кардинально, а не для подгонки пикселей.
Ответ написан
@DolyaSerg
Junior Front End dev
Нельзя верстать на фактических еденицах. Перейди на относительные. А медиа запросы это хорошо. И много их не бывает. Хоть через 1 пиксель.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@M-RESULT
А смысл городить огород из множества разрешений? Я далеко не фанат bootstrap, но беру его брейкпоинты за ориентир, и потом верстаю как душе угодно. В итоге всегда получается адекватная вёрстка с правильным отображением на всех устройствах. По мне так здесь просто усложнил себе жизнь))

Ну и плюс, соглашусь с комментарием выше, что нужно всё продумывать на этапе дизайна.
Ответ написан
@RuComMarket
Битрикс FullStack разработчик
Получается ты верстаешь чуть ли не под каждую модель телефона и монитора. Зачем?
верстка делается под варианты: смартфоны, планшеты, мониторы, fullscreen. Делаешь контейнер, который будет иметь одинаковые размеры, например если у тебя экран 1000 или 1200, сам контейнер всегда 960 (просто грубый пример) а по краям отступы, т.е. берется размеры "от и до" и делается контейнер по минимальному размеру данного диапазона
Ответ написан
@FimaUA
Насколько я понял, вы адаптирует сайт в консоли разработчиков, то есть в браузере, и после внесения изменений, при обновлении страницы, вы теряете все внесённые изменения. Если это так, то знайте, что консоль разработчиков это не редактор, она не сохраняет изменения, которые вы в ней проводите. Вам нужно внести свои правки непосредственно в файл сайта, css или html.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
02 апр. 2020, в 16:49
15000 руб./за проект
02 апр. 2020, в 16:41
2000 руб./за проект
02 апр. 2020, в 16:33
10000 руб./за проект