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

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

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

https://vk.com/video-219751701_456239243

VK Видео | YouTube | Rutube

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

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

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

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

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

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


У Root размер шрифта 1vw

Например:

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

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

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

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

Например:

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

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

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


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


Задаем размер заголовка 16em

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


Задаем размер обычного текста 1em

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


    Переводим размеры и отступы для div-блока из px в em

Готово! Теперь контент сайта плавно увеличивается и уменьшается при изменении размеров экрана.


Сайт пропорционально масштабируется при изменении ширины экрана

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

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

  • Плавное масштабирование при изменении размера экрана
  • Пропорциональное изменение всех элементов
  • Отсутствие задержек при изменении размера окна

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

Резюме

  • Автоскейл в Taptop реализуется с помощью относительных единиц измерения, чтобы контент масштабировался плавно.
  • Задайте настройки:
    • для Root — размер шрифта 1vw
    • для всех элементов — размеры (текст, ширина, отступы) в em