Comments 6
А там на первом примере две одинаковых картинки и должны быть?
Неплохая статья, но очень базовая. В целом можно использовать к примеру tailwind у которого почти всегда в rem идет.
И будет вам радость. Но правда классов много будет коде и в дом дереве.
Давно использую "динамические пиксели". Но не для больших экранов, а для мобильных. Если вижу что агент браузера от мобильного телефона то вычисляю размер rem относительно ширины экрана, для других экранов фиксировано от px.
Очень помогает когда интерфейс невозможно вогнать в размеры 380px мобильника. Делаю имитацию 550 и уже сложные формы помещаются.
Верстаю в пикселях, но при сборке конвертирует в rem. Из минусов нужно всегда помнить что верстаешь векторную картинку. Делал на эту тему доклад лет 10 назад. Все жду когда появится наивное решение.
Кому интересно можете попробовать тут https://ooko.pro . В инспекторе включите мобильник и перезагрузите, а потом меняйте ширину экрана.
Как мы применяем гибкую вёрстку для адаптива страниц под большие экраны