Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин
Адаптивный или отзывчивый шрифт - это мечта любого верстальщика.
Я пересмотрел множество вариантов реализации адаптивной верстки текста, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться! Бонус SCSS миксин!
🔴 UPD упрощенная формула (медиа запрос не нужен):
font-size: calc(24px + 16 * ((100vw - 320px) / (1280 - 320)));
SCSS Миксин:
$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
Препроцессор SCSS/SASS: https://www.youtube.com/watch?v=Mrq2ora_p0o&list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr&index=14
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Видео Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин канала Фрилансер по жизни - IT и фриланс
Я пересмотрел множество вариантов реализации адаптивной верстки текста, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться! Бонус SCSS миксин!
🔴 UPD упрощенная формула (медиа запрос не нужен):
font-size: calc(24px + 16 * ((100vw - 320px) / (1280 - 320)));
SCSS Миксин:
$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
Препроцессор SCSS/SASS: https://www.youtube.com/watch?v=Mrq2ora_p0o&list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr&index=14
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Видео Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин канала Фрилансер по жизни - IT и фриланс
Показать
Комментарии отсутствуют
Информация о видео
11 мая 2020 г. 14:13:47
00:15:13
Другие видео канала
Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты // Фрилансер по жизниVS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучениеGulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтовCSS transform. 2D и 3D трансформации translate, scale, rotate и другиеМетодология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизниPX, EM, REM - Единицы измерения в CSSВсе про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Динамический адаптив // Быстрая адаптация сложных объектов на JavaScriptИконочный шрифт. Подключение Font Awesome. Создание иконочного шрифта из SVG файлов.Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmaxОтзывчивый выход объекта за пределы сетки CSS HTML. Интересный случай с контейнером.Отправка формы на почту. Верстка валидация и отправка формы без перезагрузки. AJAX. PHPMailer.Числа в JAVASCRIPT. Тип данных number. Работа с числами. проблема неточных вычислений.Адаптивное (отзывчивое) CSS свойство. Как быстро адаптировать элементы.Выполняем реальный заказ на фрилансе LIVE!FLEXBOX. Примеры верстки на flex. Учимся верстать на флексах. Часть четвертая - практикаАдаптивная HTML-верстка макета из Figma с подробным объяснением. Советы от профи. HTML SCSS GULP.Единицы измерения CSS для padding, margin, height, width: px, %, em, rem, vw, vh, vmin, vmax