Как сделать Auto Scale для текста и других элементов?
Пользователи часто спрашивают, как в Taptop сделать автоскейл для текста или других элементов. Речь идет о том, чтобы контент автоматически подстраивался под размер экрана. При увеличении экрана контент становится больше, при уменьшении — пропорционально уменьшается. В Tilda этот способ называется автоскейл. Разберемся, чем отличается эта функция в Tilda и в Taptop и как ее реализовать.
Смотрите видео:
https://vk.com/video-219751701_456239243
Автоскейл в 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 реализуется с помощью относительных единиц измерения, чтобы контент масштабировался плавно.
- Задайте настройки:
- для Root — размер шрифта 1vw
- для всех элементов — размеры (текст, ширина, отступы) в em