arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобран принцип fluid-вёрстки: единица vw, задание базового размера шрифта в :root через 1vw, использование em для всех шрифтов и отступов — они становятся относительными к базовому. Показан на практике: элементы пропорционально масштабируются без правок на каждом брейкпоинте. Аналог AutoScale из других редакторов в Taptop — это именно такой подход. Один параметр в Root (font-size: 1vw) — и вся вёрстка автоматически масштабируется. Em-значения на шрифтах и отступах следуют за базовым размером. Урок для тех, кто хочет избавиться от ручных правок на каждом брейкпоинте. Понимание единиц vw и em нужно как предварительный контекст — урок по единицам измерения смотри сначала, если не знаком с ними.

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

В Figma есть Auto Scale — все размеры масштабируются пропорционально. Как сделать то же в Taptop? Чтобы и текст, и отступы автоматически подстраивались под размер экрана?
Аналог autoscale в Taptop — fluid-вёрстка: в :root задаётся font-size: 1vw, em становится относительной единицей от ширины окна. При 1600px → 1em = 16px, при 1400px → 1em = 14px. Шрифты и отступы масштабируются автоматически. Для новичков, которые хотят fluid-вёрстку. После просмотра настраиваешь автоматическое масштабирование для всех элементов.
Тайминги видео
00:00 — слышу частый вопрос как мне сделать 00:39 — под ширину экрана как это сделать 01:17 — 1.600 то 1 ем будет 16 01:54 — вёрстка когда все элементы на сайте

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока