Вычисления в CSS: calc(), min(), max(), clamp()

Опубликовано 23 декабря 2020, 18:50

Учись web-разработке с ментором loftschool.com/professions/fro...
23 декабря в 20:00 пройдёт открытый вебинар "Вычисления в CSS: calc(), min(), max(), clamp()".

Автор: Сабанцев Владимир, преподаватель курсов "Основы вёрстки", "Веб для начинающих" и "Vue.js" в LoftSchool.

При помощи этих функций CSS (calc(), min(), max(), clamp()) мы можем рассчитывать размеры элементов, отталкиваясь, к примеру, от размеров окна или родителя, и гибко управлять типографикой.
Так же эти функции позволяют писать меньше кода и медиа-запросов. Как это работает? Разберём на вебинаре.

Занятие рассчитано на новичков, которые уже имели опыт верстки (и желательно адаптива).

Подпишитесь на канал и поставьте напоминание, чтобы не пропустить.

Код с вебинара - github.com/loftschool/css-math...

Таймкоды:

0:00 Начало
4:13 Теория. Описание функций
9:27 Плавающая ширина контейнера
14:55 Поддержка функций браузерами
16:50 Интервальные паддинги
21:08 Прибитие футера. Проблемы с мобильными браузерами
30:01 Расчет точной ширины блоков
39:50 Колонки. Теория
43:20 Колонки. Фиксированное кол-во элементов в строке
49:00 Генерация классов для колоночной структуры
1:00:10 Гибкая типографика и отступы
1:08:25 Плавающие градиенты
1:16:30 Ответы на вопросы