Как сделать Auto Scale для текста и других элементов?

Пользователи часто спрашивают, как в Taptop сделать автоскейл для текста или других элементов. Речь идет о том, чтобы контент автоматически подстраивался под размер экрана. При увеличении экрана контент становится больше, при уменьшении — пропорционально уменьшается. В Tilda этот способ называется автоскейл. Разберемся, чем отличается эта функция в Tilda и в Taptop и как ее реализовать.

Смотрите видео:

Автоскейл в Taptop vs Tilda

В Tilda есть специальная настройка Autoscale, которая включается в параметрах грид-контейнера. Но при ее использовании масштабирование происходит с задержкой.

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

Как сделать автоскейл в Taptop

Шаг 1: Настроить базовый размер в Root

В Root пропишите размер текста1vw (viewport width) — это будет 1% от ширины экрана.

Например:

если ширина экрана 1600px, то 1vw = 16px

если ширина экрана 1400px, то 1vw = 14px

Шаг 2: Использовать em для других элементов

После установки базового размера в Root используйте единицы em для других элементов.

em — это относительная единица, равная базовому размеру шрифта.

Например:

если ширина экрана 1600px, то 1em = 16px

если ширина экрана 1400px, то 1em = 14px

Пример настройки при ширине экрана 1600px:

Выставим ширину экрана 1600px и установим для Root размер текста 1vw.

Создадим для заголовка класс heading-1 и поставим размер шрифта 16em (это будет 16 x 16 = 256px).

Для обычного текста зададим размер шрифта 1em (это будет 16px).

Для div-блока тоже поставим ширину и отступы в em. Можно просто конвертировать размеры из пикселей в em — встроенный калькулятор в Taptop пересчитает значение автоматически.

Преимущества флюидной верстки

В веб-разработке этот метод называется «флюидная верстка» — когда все элементы на сайте имеют параметры в относительных единицах. Такой подход обеспечивает:

Плавное масштабирование при изменении размера экрана

Пропорциональное изменение всех элементов

Отсутствие задержек при изменении размера окна

Можно считать, что флюидная верстка — это и есть автоскейл, только более правильный.

Резюме

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

Задайте настройки: