Зачем мы верстаем в rem? 🧑‍💻

В Taptop можно работать с разными единицами измерения: px, vw, vh, em и rem. У каждой из них своя логика, но для флюида подходит не всё.

Пиксели понятные, но жёсткие. Если задать элементу 40px, он так и останется 40px, независимо от ширины экрана. А нам нужно, чтобы размеры интерфейса пропорционально менялись.

С vw элементы начинают зависеть от ширины окна. Но собирать весь проект только в vw — это боль. При переходе на каждый новый брейкпоинт (на планшет или мобилку) вам придётся заново пересчитывать в калькуляторе вообще все значения из макета.

em тоже может запутать. Эта единица привязана к размеру шрифта конкретного блока. Из-за этого отступ 3em у крупного заголовка и у мелкого абзаца даст на экране абсолютно разные расстояния.

А вот rem работает спокойнее. Он привязан к одному единственному корневому элементу (root), поэтому 3rem всегда дают предсказуемый размер для любых блоков.

Но просто переключиться на rem недостаточно. Традиционно за основу корня берут 16px. Под эту базу созданы десятки сервисов-конвертеров. Но пересчёт от 16 сложный: чтобы получить точные отступы из макета, нужно постоянно держать калькулятор открытым.

Мы делаем иначе: через embed с глобальными стилями прописываем скрипт и задаём корень так, чтобы на основном разрешении макета он был равен ровно 10px.

Например, если макет нарисован на 1600, значение в скрипте получается 0.625vw. Для макета на 1440 цифра будет другой, но суть остаётся.

Как только root настроен на 10px, мы полностью освобождаемся от калькуляторов. Начинается нормальная жизнь:
• в макете отступ 40px → просто пишем 4rem
• заголовок 56px → ставим 5.6rem
• элемент 120px → пишем 12rem

Берём значение из Figma, мысленно делим на 10 и переносим в Taptop. А когда доходим до адаптива, логика сохраняется. Вам не нужно пересчитывать значения элементов руками — вы просто добавляете в скрипт нужный брейкпоинт (планшет или мобилку) и его vw‑значение.

Ещё один нюанс. В скрипте можно оставить PC без ограничений — тогда интерфейс будет флюидно расти вместе с шириной монитора. А можно поставить потолок (например, на 1920): после этой точки элементы зафиксируются в абсолютных значениях. Это отлично выручает, когда на огромных экранах всё начинает казаться слишком гигантским. 🖥