Сверстал свой первый "сложный" веб-сайт и адаптировал его. Проблема в том, что при адаптации в консоли разработчика сайт выглядит нормально, потом обновляешь страницу - и уже нет. Правишь. Потом снова обновляешь, опять все поехало. Так и танцевал с бубном, пока все не стало выглядеть ок на всех разрешениях. Открыл сайт на iPhone XR и на широком экране (сам верстал на 13") - все поехало. Делал я это долго и мучительно.
Вопрос: как делать адаптивную верстку быстро, безболезненно и так, чтобы я был уверен, что все будет выглядеть ок на всех расширениях?
Чтобы верстать адаптивно - в первую очередь надо верстать адаптивно.
Размеры все должны быть по максимуму относительными.
Флексы, гриды, проценты, vh, vw, em.
Медиа-запросы же нужно использовать только тогда, когда нужно поменять структуру кардинально, а не для подгонки пикселей.
А смысл городить огород из множества разрешений? Я далеко не фанат bootstrap, но беру его брейкпоинты за ориентир, и потом верстаю как душе угодно. В итоге всегда получается адекватная вёрстка с правильным отображением на всех устройствах. По мне так здесь просто усложнил себе жизнь))
Ну и плюс, соглашусь с комментарием выше, что нужно всё продумывать на этапе дизайна.
Получается ты верстаешь чуть ли не под каждую модель телефона и монитора. Зачем?
верстка делается под варианты: смартфоны, планшеты, мониторы, fullscreen. Делаешь контейнер, который будет иметь одинаковые размеры, например если у тебя экран 1000 или 1200, сам контейнер всегда 960 (просто грубый пример) а по краям отступы, т.е. берется размеры "от и до" и делается контейнер по минимальному размеру данного диапазона
Одиночка Айс, тут не в лени дело, а в объеме написанного
результат:
быстро написанный код
компактный код
меньше объема передаваемых данных
себестоимость кода в разы дешевле
ведь свойства в любом случае будут передаваться. Вот сделал например под 50 экранов, и зачем передавать все свойства на один маленький экранчик? а так всего 4 вида, а результат тот же
Михаил, вопрос не в том, чтобы верстать под 50 экранов, а в том, чтобы верстать адаптивно, т.е. при изменении ширины экрана подстраивать верстку. вариант с 4 видами хорош, но показывать на 1400 вариант для 1024, ну, такое. Или для 768 показывать как 360.
Одиночка Айс, тут еще зависит от дизайна, какие-то блоки растягиваются на 100% какие то фиксируется по ширине контейнера, какие-то скрываются или появляются при определенной ширине, в итоге будет все адаптивно, но это куда лучше чем делать различия например для 320,375,414 (эмуляция айфонов в хроме, как пример)
большинство сайтов и делают контейнерами, других вариантов я даже и не видел за последние несколько лет)
Изначально надо продумать дизайн в ФШ или в чем там сейчас модно. Продумать как все это будит состоять из блоков и как они должны себя вести при изменении ширины окна. И уж только потом браться за вёрстку.
Насколько я понял, вы адаптирует сайт в консоли разработчиков, то есть в браузере, и после внесения изменений, при обновлении страницы, вы теряете все внесённые изменения. Если это так, то знайте, что консоль разработчиков это не редактор, она не сохраняет изменения, которые вы в ней проводите. Вам нужно внести свои правки непосредственно в файл сайта, css или html.
Простой
Простой
