Обсудим проблему пикселей и её решение — единицу измерения Rem, которую можно и нужно использовать буквально для всех свойств и даже для определения диапазонов медиазапросов. Разберём, как реализовать адаптивный размер шрифта через CSS-функцию clamp и единицы измерения rem + vw, обернём всё в удобный Sass-миксин fluid-text. Создадим функцию преобразования значения из пикселей в Rem через Sass-функцию. Timeline: 00:00 | Введение 00:30 | Проблема пикселей 03:26 | Единица измерения Rem 05:36 | Rem для font-size и других CSS-свойств 08:17 | Единица измерения Em 09:19 | Rem для размеров элементов 11:15 | Rem для медиазапросов 14:55 | Неправильное использование Rem-единиц — уменьшение font-size для html при адаптации 17:30 | Адаптивный размер шрифта через clamp, rem и vw 22:20 | Преобразование значения из пикселей в Rem через Sass-функцию 24:45 | Заключение Ссылки: Код из урока:
PostCSS плагин pxtorem:
Чат в телеграмме (помощь новичкам):
Boosty (поддержать канал):
Бесплатные курсы на канале: HTML: • HTML курс 2024 CSS: • CSS курс 2024 JS: • JavaScript курс 2024 A11y: • Accessibility курс 2024 Мастер-класс по верстке для новичков: • Адаптивная верстка сайта с нуля для н... Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Вёрстка сайта с 0 до результата | HTM... Frontend Roadmap 2024 • Frontend Roadmap 2024 | Что должен уч... Автор: Личный сайт:
Telegram:
Boosty:
GetMentor:
Solvery:
#frontend #фронтенд #css
