🧩 Что такое vw и как мы делаем флюид

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

Благодаря vw всё масштабируется плавно, без резких скачков между брейкпоинтами. Это идеально для флюида.

Но верстать всё напрямую в vw это настоящая боль. В Taptop встроенный калькулятор корректно работает только при верстке на разрешении макета. Будете писать всё в vw, жестко привяжетесь к одному разрешению (например, к 1600px). И если вы перейдете на 1440px, но попытаетесь вбить значение из макета на 1600px, калькулятор переведет всё в vw неверно. Так верстать не очень-то и удобно.

Плюс на всех новых брейкпоинтах придется пересчитывать каждое значение в vw. Вероятность ошибиться и что-то упустить просто огромная.

Поэтому на менторстве мы используем другой подход. Берем rem и специальный скрипт, который сам цепляет rem к ширине экрана.

Что это дает:
• сохраняется полная флюидность
• все элементы зависят от ширины окна
• мы работаем с нормальными значениями в rem
• быстро переносим размеры из Фигмы без сломанных расчетов

Вместе они дают идеальный флюид. Сайт тянется, а верстальщик не тратит часы на перепроверку математики 😎