Расширенный автоскейл

Сокращает время на вёрстку — добавляет автоскейл с уменьшением, масштабирование страницы по своим брейкпоинтам и позволяет масштабировать стандартные блоки.

Автоскейл для Zero‑блоков

Масштабирование стандартных блоков

Модификация

Отключение автоскейла для устройств

Модификация

Автоскейл для Zero‑блоков

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.3/mods.min.js"></script>

Включите автоскейл в настройках Zero-блоков
Задайте в настройках модификации минимальный и максимальный брейкпоинт, относительно которых будет работать кастомный автоскейл
Скопируйте код и вставьте его в блок T123 в конец страницы

Открыть пример

Как это сделано?

<script>rescale.init({ min: 360, max: 480, direction: "upscale" })</script>
<script>rescale.init({ min: 480, max: 1440, direction: "downscale" })</script>
<script>rescale.init({ min: 1440, keep: 1920, direction: "upscale" })</script>

Этот код масштабирует страницу по заданным брейкпоинтам – 360, 480, 1440 и 1920px. Для того, чтобы применить масштабирование сразу к нескольким адаптивам, мы задублировали код и указали соответствующие брейкпоинты каждому из них. Экраны в настройках Zero-блоков могут отличаться от тех, что заданы в модификации, подстраивать их необязательно. В данном примере в настройках стоят 320, 480 и 1200px.

Для работы модификации в настройках всех блоков должен должен включен автоскейл. Убеждаемся, что он работает и размещаем код в самом конце страницы.

Настройки модификации

Минимальная ширина экрана, от которой будет работать модификация.

Можно задать любое значение в рамках одного адаптива (например, для экранов 320–480px)

Направление масштабирования:

Минимальный брейкпоинт:

Максимальный брейкпоинт:

Максимальная ширина экрана, до которой будет работать модификация.

Можно задать любое значение в рамках одного адаптива или оставить пустым

<script>rescale.init('.t-rec')</script>

Скопировать код

Особенности

Собственные брейкпоинты

Блоки скейлятся по любой ширине, независимо от значений в настройках
Применяется ко всей странице

Свои параметры автоскейла будут работать для всей страницы
Работает с любыми блоками

Мод позволяет масштабировать как Zero, так и стандартные блоки