Как мы применяем гибкую вёрстку для адаптива страниц под большие экраны

[danilovmy]

А там на первом примере две одинаковых картинки и должны быть?

[olga_c]

Добрый день! Спасибо за вопрос.

Контент на картинках одинаковый, отличие в том, что в первом случае блок сверстан без гибких составляющих и при ширине экрана 2560 пикселей мелкие элементы создают неудобство для пользователей.

[ZiZIGY]

Неплохая статья, но очень базовая. В целом можно использовать к примеру tailwind у которого почти всегда в rem идет.

И будет вам радость. Но правда классов много будет коде и в дом дереве.

[olga_c]

Добрый день! Спасибо за комментарий.

В целях уменьшения количества кода и оптимизации библиотека не используется.

[ooko]

Давно использую "динамические пиксели". Но не для больших экранов, а для мобильных. Если вижу что агент браузера от мобильного телефона то вычисляю размер rem относительно ширины экрана, для других экранов фиксировано от px.

Очень помогает когда интерфейс невозможно вогнать в размеры 380px мобильника. Делаю имитацию 550 и уже сложные формы помещаются.

Верстаю в пикселях, но при сборке конвертирует в rem. Из минусов нужно всегда помнить что верстаешь векторную картинку. Делал на эту тему доклад лет 10 назад. Все жду когда появится наивное решение.

Кому интересно можете попробовать тут https://ooko.pro . В инспекторе включите мобильник и перезагрузите, а потом меняйте ширину экрана.

[olga_c]

Добрый день! Спасибо, что поделились своим опытом использования относительных величин!