Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин
HTML-код
- Опубликовано: 4 фев 2025
- Адаптивный или отзывчивый шрифт - это мечта любого верстальщика.
Я пересмотрел множество вариантов реализации адаптивной верстки текста, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться! Бонус 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: • Препроцессор SASS/SCSS...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🔴UPD упрощенная формула (медиа запрос не нужен) в описании к выпуску!
🤟 Полезно? Напиши что думаешь!
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Привет
Для начала - Спасибо большое за элегантное решение насущной проблемы)
Но сегодня нашел небольшой баг
при увеличении страницы ctrl+scroll (или разрешении больше макетного, в режиме разработки) шрифт превышает макетные размеры.
Из-за этого на больших экранах (или сильном увеличении) шрифт может ломать вёрстку
Вылечил просто брейкпоинтом на размер макета с макетным font-size:
@mixin adaptiv-font($pcSize, $mobSize){
$addSize: $pcSize - $mobSize;
$addMobSize: $pcSize + $mobSize * .7;
@media (max-width: 767px){font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidht}));}
@media (min-width: 768px){font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidht}));}
@media (min-width: #{$maxWidht + px}){font-size: #{$pcSize + px};}
}
посмотрел на разных сайтах, на больших экранах, как правило, оставляют среднеразмерный font-size, да и по useability это вроде как логично, так-что решение на поверхности
пишу я это только потому, что кто-то мог не обратить на это внимание (собственно и я это совершенно случайно заметил), и считаю обязанностью предупредить согильдийцев)
@@zr0nis487 спасибо, буду разбираться! Можно пробовать переписать на rem должно помочь
@@FreelancerLifeStyle имеется ввиду старую версию?
Женя, а вы сами такой подход часто используете?
Спасибо большое Вам, Евгений! Не сразу обратил внимание на упрощенную формулу. С длинной - что-то пошло не так. Применил короткую - получилось. Наложил пиксел перфект - все сходится. Но, у меня макет только под дэсктоп, поэтому на 320 просто тупо замерил линейкой. Все сходится. По ресайзингу тоже все идет норм, формула подставляется на разных разрешениях. Будем тестить дальше. Думаю, оч хорошая заморока. Еще раз большое спасибо. Успехов!
Не знаю других влогеров, которые рассказывали бы с таким воодушевлением.
Видео огонь)
Спасибо!
Интереснее было смотреть не на сам способ, а на то, как радуется Женя ) Эмоции - это то чего не хватает в IT-блогинге )
Спасибо! Я надеюсь способ тоже ничего)
Кстати, да ☝️
@@FreelancerLifeStyle Ничего... =D Да это Круто!
Скільки щирості та дитячої радості! You made my day! Дякую!!!
Круто, что автор подает материал с такой эмоциональностью. Это очень положительно влияет на процесс просмотра. Кто смотрит Барабекуса, со мной согласятся)))) А про качество материала в предыдущих комментариях все сказано. Хочу пожелать автору поскорее 100к и 1000к подписчиков. Тут уж придется поработать, и не только в свободное время)))
Спасибо! Я постараюсь)
Евгений, ты не фрилансер, ты - ПРОФЕССОР! ))))
Спасибо))
В конце ролика восхитительное выражение лица.
У меня было такое когда первый раз подключил :hover; .
Спасибо за знания и настроение!
it сфера это то место, где постоянно нужно учиться и находить что-то новое, смотреть на чужие примеры и изобретать свои) Вы один из немногих авторов, которые подают инфу максимально легко и без воды. Тут и новичкам полезно, и бывалые разрабы найдут для себя много нового) отличная подача и в целом качество видосов! Ну и эмоции настоящие, любой разработчик радуется как ребенок, когда всё начинает работать как надо😅☝️ главное не перехвалить 😹спасибо, Жека, за твой позитив😉
Все верно, я рад как ребенок)) Спасибо!
Согласна!
Я не понимаю,почему у тебя до сих пор нету как минимум 1миллиона подписчиков,такие топовые видосы.Удачи тебе в продвижении канала!
Та на подобных каналах всегда маловато подписчиков.мало кто хочет обучаться...Они лучше посмотрят что будет с арбузом если сбросить его с 5 этажа)
@@ДенчикШмель-ъ6ц ну что с арбузом, тоже интересно.
Спасибо!
И чем, по-твоему, будут заниматься эти 1 млн. новоиспеченных верстальщиков? Сходи на канал с миллионом подписчиков, поймешь почему здесь такого числа никогда не будет.
@@DmitriyVereschagin почему ??? По моему мнению канал очень хороший. Например не понимаю, чего не хватает в этом канале. Для того, чтобы был миллион.
Ты самый ЖИВОЙ БЛОГЕР из всех тех, кто занимается этой темой!!! Всегда интересно и приятно смотреть. Это не обычная роботизированная подача фактов с призывом пройти обучение. Видно что ты живешь этим и получаешь истинное удовольствие от того что делаешь!!! СПАСИБО ЗА ТВОИ ТРУДЫ!
Спасибо большое! Я рад что нравится!
Ну никак не нарадуюсь, что нашла этот канал! СПАСИБО тебе за такой качественный материал!
Пожалуйста!
Недавно на тебя наткнулся и спасибо судьбе за это, эта формула просто что-то с чем то) Спасибо огромное) Ожидаю в дальнейшем ещё больше полезной информации для web разработчика)
Будет!
$gratitude: 100%; Мало того что материал бомбезный, так благодаря ему еще и выкупил интерполяцию в sass. (Написал простенький миксин, чтобы быстрее шрифты подключать и все мозги прокипятил в попытках использовать переменные в url. А оно вот как просто оказывается!) Спасибо огромное! Лучший блогер по фронту.
Спасибо!
оооо очень полезная штука, вечно проблемы были со шрифтами, спасибо !
Пожалуйста!
Я в восторге от интеллектуальной тонкости этого инженерного решения. Не думал, что в вёрстке может потребоваться какое-то математическое вычисление как в языке программирования. Но это решение мне доставило такой интеллектуальный и эстетический кайф, что я не могу выразить словами. Тонко, круто!
А я прекрасно понимаю, почему автор так радуется. Сколько ни пробую, адекватного и тем более бесшовного адаптива, да ещё и нормально настраиваемого - хрен добьёшься. Я бы тоже обрадовался, это как колесо открыть, честное слово. Спасибо за отличный метод. Не так сложно кстати, просто для каждого вида текста свою базовую макетную ширину указываешь, а остальное копируешь. Спасибо!
Пожалуйста!
Дуже чудове відео для пояснення адаптивності шрифта, і це супер бомбезна формула, хочу для автора що тепер є простіший спосіб - це приблизно так, font-size: clamp(1em, 1vw, 2em); Дякуючи цьому відео, поясненню і таким емоціям я знайшов цей запис.
Видно что автор человек идейный, фанат своего дела. Приятно видеть, что развивается не только аудитория но и автор.
Спасибо!
Евгений, вы просто ГЕНИЙ) Огромная благодарочка за такую работу!) Реально зачетная тема) Давай еще больше подобных лайфхаков)
Большой ЛУКАС! И быстрее уже 100к
Спасибо!
Жека, спасибо за труды и эмоции. В наше время мало кто готов делится своими наработками. Но ты не из тех и за это тебе отдельный респект и уважуха! 😉👍
Спасибо!
Вот это я понимаю контент!!!
Нигде еще не встречал подобной темы. Жека ,ты большой молодец!!!!!
Спасибо!
Это невероятно. Такая простая формула, а так сильно облегчит нам жизнь. Жека, спасибо огромное за твои открытия, старания и за самый прекрасный IT материал в бесплатном доступе. Уже поддержал на патреоне, жду еще больше нового крутого контента!
Спасибо!
Словами не передать благодарность за такой труд! Желаю дальнейшего развития канала, чтобы больше людей получали такую важную и интересную информацию!
Смотрю твой канал и иногда диву даюсь. Мужик, ты гений! Я ни разу не сталкивался с подобными формулами и на обучении в оффлайн школе такому не учат. Мне очень понравилась формула, уже использую в своей верстке. Спасибо!)
Развития твоему каналу.
Сразу вижу предпринимателя-профессионала. Радуется своим продуктом как ребенок!
Хех, это да)
Блин, твои формулы реально крутая тема, адаптивы делать одно удовольствие :D
Просто чудо какое -то ))) я не понимаю как это работает под капотом , но триллиард процентов сохраню где нибудь файлик стилевой с формулами )) огромное спасибо )) оттестил на своем макете , просто пушка . Огромное спасибо. Подобные фишки просто бесценны✌️✌️✌️
Вижу огонь в твоих глазах и это круто. У тебя талант (хотя думаю за этим скрыт реальный опыт и серьёзная подготовка к видео) к подачи материала. Я пересмотрел около 20 разных топ it блогеров и могу с уверенностью сказать, у тебя получается лучше всех. Минимум воды, максимум рабочих актуальных схем верстки и реальный позитив. Буду с удовольствием следить за продвижением твоего канала и ждать новых видео. Большая просьба, не скатывайся со временем мусоля одну тему по 30 минут как другие, и тебе гарантирован успех. Удачи.
Жека, это нереально крутая штука! Не перестаю повторять: ты капитальный красавчик! Пойду юзать твою фичу в новом проекте. Спасибо!
Пожалуйста!
супер! только на неделе думал как это можно сделать и тут вот! по упрощенной формуле под видео работает шикарно!!! не знал, что можно значения писать в виде формулы. спасибо!
Пересмотрел уже половину видео на этом канал! Женя, огромное спасибо за Вам за Ваш труд! Здесь супер качественный и ценный контент, которы меня уже несколько раз очень выручил!
Я рад!
Женя, спасибо тебе за этот крутой урок! Обучаюсь верстке по твоим видео, это лучшее во всем интернете что я видел!
прям настроение даже поднимается, когда смотришь с каким счастьем Женя все рассказывает!))) Классное видео!!!)
Полюбил я тебя) Классные ролики! Куча работы проделано и все в темпе без просадок) так держать бро!
Ты мне помог уже во многих местах, обязательно отправлю тебе кэш!
Женя, это невероятно!! Дай Бог тебе здоровья и твоей семье. Я причем попробовал ту же формулу подставить width для div, И ОНА РАБОТАЕТ!! Я таким образом подстроил изменения величины логотипа например😉👍 Спасибо огромное🙏
Дякую, Євгене!
Це круті формули. Все працює ідеально.
Очень круто, долго искала как сделать так чтобы шрифт подходил под все экраны.Очень весело рассказываешь!)))
Спасибо!
Подивився багато твоїх відео за останні 2 місяця, залишу хоч один коментар) я в захваті від твоєї роботи! буду пробувати цей метод з шрифтами)
Немного переделал формулу, запихнул её в clamp(), теперь даже при безбожном зуме могу не боятся за верхнюю и нижнию границу размера шрифта. Дякую.
Как всегда- информативно, познавательно и позитив просто зашкаливает! Евгений! Ты великий человек!
Спасибо!
крутой гайд, сразу показывает насколько упрощает жизнь препроцессор, большое спасибо автору, возьму себе на заметку этот трюк :)
Пожалуйста!
Большое спасибо за Вашу работу!
Большое спасибо за Ваше видео! Велике спасибі за Ваше відео! Дякую за Ваше відео! Thanks so
much for your video! Ďakujem vám veľmi pekne za prácu! Ďakujeme
vám za vaše video! Nagyon köszönöm munkáját! Nagyon köszönöm a videót! Dziękuję bardzo za twoją pracę! Dziękuję bardzo za Twój film! Děkuji vám za vaši práci! Děkujeme za vaše
video!
Хех) Спасибо!
Женя, спасибо огромное. Для меня, как разработчика, который не особо любит верстать контент просто бесценен!!
Я рад!
Женя, спасибо тебе огромное за метод! Это действительно мега-крутяк всего за пару кликов! Я не понимаю логику людей поставивших дизлайк: у них или не получилось, или они не поняли теории. 2 куска кода в описании работают "на ура" даже в sass и в связке с gulp. Результат действительно шикарный.
Дякую, Вам за працю, цей метод просто вогонь!!!
Будь ласка
Спасибо, только не давно искал инфу на адаптив шрифта, нарыл только то, что не понятно. Очень круто, спасибо тебе большое. Прям огонёк какой-то 🔥
Я рад!
Круто!) Такой воодушевленный!) Каеф! Ты молодец, сделал великолепную работу!) И с нами поделился) Спасибо!!!
Пожалуйста!
Вместе с полезными знаниями, приятная доза позитива!!! Так держать!!!! =)))))
Ты просто невероятно жизнерадостный)
Спасибо за крутой урок и отдельно за мотивацию!
Пожалуйста!
Чувак то что я увидел в данном видео это даже не бомба, это просто мать-бомба, Я в восхищении!!!!!!!!!!!!!!!
спасибо!
Начало твоих видео всегда заставляет улыбаться. "Приве-е-ет! Это фрилансер по жизни!" с улыбкой на лице сильно отличается от монотонного "Привет. С вами N" и т.д. и т.п. других ютуберов.
Я рад!
@@FreelancerLifeStyle Спасибо тебе за отличный контент!
Долго искал, пробовал и всё не мог получить такой результат. Спасибо, спас от бессонных ночей и в конце концов успокоил)
Один из самых позитивных уроков что я видел. Спасибо автору😁👍
Спасибо Женя. Ты все очень понятно объясняешь, в отличии от некоторых блогеров.
Спасибо! Стараюсь!
Собственно, материал полезный, подготовлен качественно, имеет новизну. Преподнесен доступно и в положительном ключе. Собственно, лайк)
У Вас такие классные видео, они меня захватывают! Приятно видеть настолько увлеченного ЧЕЛОВЕКА! Спасибо!!!
Блин чувак это круто! Я раньше решал такое с помощью заклинаний и лапки голубя.... но на смену пришла математика фрилансера по жизни) спасибо!
Да это ж гребаная магия. Просто браво!!!
Спасибо!
Рад что это появилось в СНГ комюнити . Приблизительную формулу можно встретишь на забугорных форумах, правда там ее использовали для адаптации шрифта под верстку писем так как media работает худо. Спасибо за урок и подробное объяснение . Однозначно сразу в закладки быстрого доступа)
Спасибо!
Офигенно!!! Порадовали эмоции, прям улыбнуло тоже!))
Спасибо!))
Я вообще чайник в этой сфере, но даже я смог адаптировать свой текст на сайте под мобильные устройства благодаря вам, Спасибо !
Спасибо большое! Этот адаптив можно использовать не только для размера шрифта, но и для других свойств, которые нужно адаптировать.
Ваааау!! Вообще огонь! А я вот для себе по аналогии сделал ещё и для свойства line-height. И теперь ещё сильнее радуюсь! =) Эта формула пушка! Спасибо большое.))))))
Потрясающе! Шикарный урок, подача информация, материал, супер! ✌
Египетскаясила! Я метровые медиа запросы расписываю, пробую, выясняю, а тут вот оно как. Таким методом моя сss сократится на треть =) Спасибо и за науку и за атмосферу видео.
Пожалуйста!
Вот именно так нужно относиться к любимому делу. Спасибо за ваш труд, Евгений.
все видео сидел и смеялся с реакции, прям зарядил энергией) Спасибо что ты делаешь такие видосики!!!
Боже да это просто офигенно! Если по этой же самой формуле задавать размер блока с текстом, то поможно подобраить такой размер при котром будут сохранятся переносы слов также как на макете! И не нужно использовать костыли вроде, и неразрывного пробела! Класс! Жека спасибо!!!
Просто разрыв. Круто. Очередной лайк и большой Респект! Почему этот метод нигде не описан.
Женя, ты волшебник 🧙♂️, ОГРОМНОЕ СПАСИБО !!!
Пожалуйста!
Как всегда, все просто супер! Однозначно лайк
Спасибо!
Красавчик.
Действительно, даже не знаю, что тут более важно, эмоции от работающего решения или сам приём со шрифтами )
Воодушевление от результата, помогли замотивироваться (устал немного), а рабочий приём, действительно, очень крутой и полезный. Лайк х2
Спасибо большое, сейчас смотрю уроки, так сказать учусь, я немного упустил времени, но надеюсь догоню,спасибо большое за такие уроки! Скоро диплом, пора учится
Пожалуйста!
Женя. Огромное спасибо тебе за проделанную тобою работу.
Не понимаю, как оно работает,но оно работает^_^ Спасибо, тебя реально приятно слушать, и даже голос не бесит и спать не хочется!
Просто фантастика! Очень нужная вещь! Как обычно крутяка!!!
Блин, уже давно ничего по вёрстке не смотрел, больше js углубляюсь но вот это видео 😘😘😘
Спасибо, Жень!
Пожалуйста!
гениально, доходчиво объяснил и почти просто)! Жека, красава!
Спасибо Жек, это бомба!)
Очень заметно как ты сияешь от такого открытия))
Да, но оказывается подобное уже было) В описании упрощенная формула
@@FreelancerLifeStyle мне твоя по душе)
Конечно чудо! Большое спасибо, что делитесь такими крутыми вещами!
Жирнючий лайк! Спас просто на дэдлайне!
Дуже круто Женя як завджи на висоті!!!
Офигенно) Вывел годную формулу, вообще супер! А то я мучался с подбором размеров шрифтов для всех экранов и в vw, и в vmax, и с calc пытался. И за миксин спс, буду пробовать, лайк однозначно)
Только благодаря тебе разбираю все самые сложные моменты , мерси!)
Вау,как раз недавно читал статью в телеге с подобной информацией и формулами и, конечно же, как говорится: нифига не понял но очень интересно. И Евгений как всегда прочитал мысли и сделал урок по адаптивному шрифту. Спасибо :)
Идеално, спасибо за ету инфу - Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин
Весьма толково. И педантично. Лайк.
Спасибо!
Я до этого пользовался другим месксином , который был разбит на разрешения самое большое, маленькое и среднее . Он меня устраивал в своей быстроте и легкостн , но после этого урока я естественно возьму на вооружение данный вариант . Женя, продолжай в том же духе у тебя один из самых годных каналов на просторах Ютуба, так держать !!!!
Спасибо!
Евгений, я тут разбирался с адаптивными шрифтами и хочу поделится формулой которая, как мне кажется, немного проще и не требует медиазапроса. Формула следующая: calc(55px + (55 - 18) * (100vw - 1440px) / (1440 - 320)) , где 55px - это размер шрифта при ширине экрана 1440px, 18px - размер шрифта при 320px . Когда размер въюпорта равен 1440px второе слагаемое равно нулю и размер шрифта равен 55px. Когда значение вьюпорта меньше 1440px разность в скобках отрицательная и при достижении 320px результатом деления выражений в скобках будет -1, шрифт при этом будет равен 18px. При увеличении въюпорта разность в скобках будет положительной и шрифт будет увеличиваться. Напиши, пожалуйста, ответ можно ли ее использовать, и не допустил ли я ошибки, может я что-то не учел.
Смотри описание урока
Евгений, спасибо большое за видео! Это как раз то, что я искала для своего проекта. Вы мне очень помогли! =*
Все последний видос, я спылесосил уже все что ты говорил за все время) Ты лучший)
Ну как всегда) Как только я подумал о миксине - Жека уже показал, рассказал и продемонстрировал) Спасибо , очень классная и качественная фича!
Как и всегда всё круто))) А эмоции просто божественны))))
Спасибо! ☺
Шикарное решение! Вот решить бы вопрос ещё с зумированием страницы, то было бы вообще просто великолепно.
Такое искреннее счастье!) Это прям я, когда у меня самой получилось сделать что-то сложное на JS / jQuery
Круто!
Спасибо огромное за ролик!
Сразу же применил в проекте!
теперь у меня есть миксин которым я в одну строчку прописываю все свойства шрифта)
Было бы классно увидеть еще какие нибудь интересные миксины!
Круто, теперь буду пробовать везде использовать формулу. Спасибо за сокращённую версию в описании. В этом мире всё должно быть таким адаптивным. Чтобы посмотреть размер можно навести инструментом выбора элемента)
Ну что сказать, лайк однозначно, причем это правило можно использовать не только в шрифтах, но и в высоте, например.
Все верно!
Спасибо тебе огромное. За твои труды. Очень позитивно. И главное понятно.
Пожалуйста!
Привет , ты делаешь очень крутые вещи , спасибо что ты есть ) еще хотел сказать что мотивирует вся твоя подача , особенно девиз в конце видео (смотрю тебя недавно , но почти весь твой кур прошел )