Единицы измерения в CSS

rem + dvh + Flex/Grid — этой связки достаточно, чтобы сверстать 99% современных макетов безопасно и без пикселей.

Итог: `rem` + `dvh` + Flex/Grid — этой связки достаточно, чтобы сверстать 99% современных макетов безопасно и без пикселей.

Коротко — **да**. Если хочешь не париться и покрыть 95% задач, твой джентльменский набор выглядит именно так:

1. **Для размеров, отступов и шрифтов:** **`rem`** (или `em`)

2. **Для высоты относительно экрана:** **`dvh`** (или `svh`)

Но чтобы закрыть тему и не держать в голове лишнего, вот коротко про "золотой стандарт" 2026 года, разделенный по задачам:

### Самые ходовые (Твой базовый сет)

Больше тебе эти единицы *действительно* почти не нужны. Вместо старых `px` и `%` используй:

* **`rem` — для всего, что должно быть масштабируемым.**

* *Куда тыкать:* Шрифты (`font-size`), отступы (`margin`, `padding`), ширина карточек, бордеры.

* *Почему:* Уважает настройки браузера пользователя. Если человеку плохо видно и он увеличит масштаб (или сменит базовый шрифт), весь твой сайт подстроится, а не разъедется.

* **`dvh` — для высоты на мобилках.**

* *Куда тыкать:* Герои экрана (Hero sections), модальные окна на весь экран, попапы, шторки.

* *Почему:* Пиксели тут бесполезны, а старый `vh` обрезает интерфейс на телефонах или оставляет жирные черные полосы. `dvh` чинит это динамически.

### Редкие, но важные (Держи в уме)

Не нужны постоянно, но без них иногда больно:

* **`svh`** — если блок с кнопкой внизу обрезается на айфоне. Пишешь `height: 90svh` — и кнопка гарантированно видна при открытой адресной строке.

* **`lvh`** — для лендингов, где секция должна быть ровно во весь экран *после* того, как адресная строка спряталась.

* **`%`** — для ширины внутри флексов и гридов (`flex: 1` часто лучше, чем `width: 100%`, но проценты с grids все еще рулят).

### Что идет в топку (для новичков)

* **`px`** (для высоты блоков или шрифтов) — потому что это "жесткая посадка" для юзера.

* **`vh`** (старый, без буквы d/s/l) — потому что на мобилках он считается устаревшим и косячным.

**Итог:** `rem` + `dvh` + **Flex/Grid** — этой связки достаточно, чтобы сверстать 99% современных макетов безопасно и без пикселей.