Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на 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: • Препроцессор SASS/SCSS...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Пікірлер: 746
🔴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
@zr0nis487
4 жыл бұрын
Привет Для начала - Спасибо большое за элегантное решение насущной проблемы) Но сегодня нашел небольшой баг при увеличении страницы 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 это вроде как логично, так-что решение на поверхности пишу я это только потому, что кто-то мог не обратить на это внимание (собственно и я это совершенно случайно заметил), и считаю обязанностью предупредить согильдийцев)
@FreelancerLifeStyle
4 жыл бұрын
@@zr0nis487 спасибо, буду разбираться! Можно пробовать переписать на rem должно помочь
@alexmart6968
4 жыл бұрын
@@FreelancerLifeStyle имеется ввиду старую версию?
@Dim_Dimych21
3 жыл бұрын
Женя, а вы сами такой подход часто используете?
@enterkvas
3 жыл бұрын
Спасибо большое Вам, Евгений! Не сразу обратил внимание на упрощенную формулу. С длинной - что-то пошло не так. Применил короткую - получилось. Наложил пиксел перфект - все сходится. Но, у меня макет только под дэсктоп, поэтому на 320 просто тупо замерил линейкой. Все сходится. По ресайзингу тоже все идет норм, формула подставляется на разных разрешениях. Будем тестить дальше. Думаю, оч хорошая заморока. Еще раз большое спасибо. Успехов!
Не знаю других влогеров, которые рассказывали бы с таким воодушевлением. Видео огонь)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Интереснее было смотреть не на сам способ, а на то, как радуется Женя ) Эмоции - это то чего не хватает в IT-блогинге )
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Я надеюсь способ тоже ничего)
@user-wy1qd5oi3v
4 жыл бұрын
Кстати, да ☝️
@ups7write
3 жыл бұрын
@@FreelancerLifeStyle Ничего... =D Да это Круто!
Евгений, ты не фрилансер, ты - ПРОФЕССОР! ))))
@FreelancerLifeStyle
4 жыл бұрын
Спасибо))
it сфера это то место, где постоянно нужно учиться и находить что-то новое, смотреть на чужие примеры и изобретать свои) Вы один из немногих авторов, которые подают инфу максимально легко и без воды. Тут и новичкам полезно, и бывалые разрабы найдут для себя много нового) отличная подача и в целом качество видосов! Ну и эмоции настоящие, любой разработчик радуется как ребенок, когда всё начинает работать как надо😅☝️ главное не перехвалить 😹спасибо, Жека, за твой позитив😉
@FreelancerLifeStyle
4 жыл бұрын
Все верно, я рад как ребенок)) Спасибо!
@user-wy1qd5oi3v
4 жыл бұрын
Согласна!
Словами не передать благодарность за такой труд! Желаю дальнейшего развития канала, чтобы больше людей получали такую важную и интересную информацию!
оооо очень полезная штука, вечно проблемы были со шрифтами, спасибо !
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Женя, спасибо тебе за этот крутой урок! Обучаюсь верстке по твоим видео, это лучшее во всем интернете что я видел!
прям настроение даже поднимается, когда смотришь с каким счастьем Женя все рассказывает!))) Классное видео!!!)
Круто, что автор подает материал с такой эмоциональностью. Это очень положительно влияет на процесс просмотра. Кто смотрит Барабекуса, со мной согласятся)))) А про качество материала в предыдущих комментариях все сказано. Хочу пожелать автору поскорее 100к и 1000к подписчиков. Тут уж придется поработать, и не только в свободное время)))
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Я постараюсь)
Конечно чудо! Большое спасибо, что делитесь такими крутыми вещами!
Скільки щирості та дитячої радості! You made my day! Дякую!!!
Вот именно так нужно относиться к любимому делу. Спасибо за ваш труд, Евгений.
Я не понимаю,почему у тебя до сих пор нету как минимум 1миллиона подписчиков,такие топовые видосы.Удачи тебе в продвижении канала!
@user-mg8zt6nb5f
4 жыл бұрын
Та на подобных каналах всегда маловато подписчиков.мало кто хочет обучаться...Они лучше посмотрят что будет с арбузом если сбросить его с 5 этажа)
@L-A-O-S
4 жыл бұрын
@@user-mg8zt6nb5f ну что с арбузом, тоже интересно.
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
@DmitriyVereschagin
4 жыл бұрын
И чем, по-твоему, будут заниматься эти 1 млн. новоиспеченных верстальщиков? Сходи на канал с миллионом подписчиков, поймешь почему здесь такого числа никогда не будет.
@stas9066
4 жыл бұрын
@@DmitriyVereschagin почему ??? По моему мнению канал очень хороший. Например не понимаю, чего не хватает в этом канале. Для того, чтобы был миллион.
Недавно на тебя наткнулся и спасибо судьбе за это, эта формула просто что-то с чем то) Спасибо огромное) Ожидаю в дальнейшем ещё больше полезной информации для web разработчика)
@FreelancerLifeStyle
4 жыл бұрын
Будет!
Вместе с полезными знаниями, приятная доза позитива!!! Так держать!!!! =)))))
Блин, твои формулы реально крутая тема, адаптивы делать одно удовольствие :D
У Вас такие классные видео, они меня захватывают! Приятно видеть настолько увлеченного ЧЕЛОВЕКА! Спасибо!!!
Как всегда- информативно, познавательно и позитив просто зашкаливает! Евгений! Ты великий человек!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Пересмотрел уже половину видео на этом канал! Женя, огромное спасибо за Вам за Ваш труд! Здесь супер качественный и ценный контент, которы меня уже несколько раз очень выручил!
@FreelancerLifeStyle
3 жыл бұрын
Я рад!
Полюбил я тебя) Классные ролики! Куча работы проделано и все в темпе без просадок) так держать бро! Ты мне помог уже во многих местах, обязательно отправлю тебе кэш!
Евгений, вы просто ГЕНИЙ) Огромная благодарочка за такую работу!) Реально зачетная тема) Давай еще больше подобных лайфхаков) Большой ЛУКАС! И быстрее уже 100к
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Я в восторге от интеллектуальной тонкости этого инженерного решения. Не думал, что в вёрстке может потребоваться какое-то математическое вычисление как в языке программирования. Но это решение мне доставило такой интеллектуальный и эстетический кайф, что я не могу выразить словами. Тонко, круто!
все видео сидел и смеялся с реакции, прям зарядил энергией) Спасибо что ты делаешь такие видосики!!!
Потрясающе! Шикарный урок, подача информация, материал, супер! ✌
Ну никак не нарадуюсь, что нашла этот канал! СПАСИБО тебе за такой качественный материал!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Вот это я понимаю контент!!! Нигде еще не встречал подобной темы. Жека ,ты большой молодец!!!!!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
супер! только на неделе думал как это можно сделать и тут вот! по упрощенной формуле под видео работает шикарно!!! не знал, что можно значения писать в виде формулы. спасибо!
Женя. Огромное спасибо тебе за проделанную тобою работу.
Один из самых позитивных уроков что я видел. Спасибо автору😁👍
Привет , ты делаешь очень крутые вещи , спасибо что ты есть ) еще хотел сказать что мотивирует вся твоя подача , особенно девиз в конце видео (смотрю тебя недавно , но почти весь твой кур прошел )
Евгений, спасибо большое за видео! Это как раз то, что я искала для своего проекта. Вы мне очень помогли! =*
В конце ролика восхитительное выражение лица. У меня было такое когда первый раз подключил :hover; . Спасибо за знания и настроение!
Жека, спасибо за труды и эмоции. В наше время мало кто готов делится своими наработками. Но ты не из тех и за это тебе отдельный респект и уважуха! 😉👍
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Вижу огонь в твоих глазах и это круто. У тебя талант (хотя думаю за этим скрыт реальный опыт и серьёзная подготовка к видео) к подачи материала. Я пересмотрел около 20 разных топ it блогеров и могу с уверенностью сказать, у тебя получается лучше всех. Минимум воды, максимум рабочих актуальных схем верстки и реальный позитив. Буду с удовольствием следить за продвижением твоего канала и ждать новых видео. Большая просьба, не скатывайся со временем мусоля одну тему по 30 минут как другие, и тебе гарантирован успех. Удачи.
Женя, это невероятно!! Дай Бог тебе здоровья и твоей семье. Я причем попробовал ту же формулу подставить width для div, И ОНА РАБОТАЕТ!! Я таким образом подстроил изменения величины логотипа например😉👍 Спасибо огромное🙏
Спасибо, только не давно искал инфу на адаптив шрифта, нарыл только то, что не понятно. Очень круто, спасибо тебе большое. Прям огонёк какой-то 🔥
@FreelancerLifeStyle
4 жыл бұрын
Я рад!
Как всегда, все просто супер! Однозначно лайк
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Круто, теперь буду пробовать везде использовать формулу. Спасибо за сокращённую версию в описании. В этом мире всё должно быть таким адаптивным. Чтобы посмотреть размер можно навести инструментом выбора элемента)
Это невероятно. Такая простая формула, а так сильно облегчит нам жизнь. Жека, спасибо огромное за твои открытия, старания и за самый прекрасный IT материал в бесплатном доступе. Уже поддержал на патреоне, жду еще больше нового крутого контента!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Ваааау!! Вообще огонь! А я вот для себе по аналогии сделал ещё и для свойства line-height. И теперь ещё сильнее радуюсь! =) Эта формула пушка! Спасибо большое.))))))
гениально, доходчиво объяснил и почти просто)! Жека, красава!
Очень круто, долго искала как сделать так чтобы шрифт подходил под все экраны.Очень весело рассказываешь!)))
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Жека, это нереально крутая штука! Не перестаю повторять: ты капитальный красавчик! Пойду юзать твою фичу в новом проекте. Спасибо!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Женя спасибо за все что ты делаешь!
Круто!) Такой воодушевленный!) Каеф! Ты молодец, сделал великолепную работу!) И с нами поделился) Спасибо!!!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Смотрю твой канал и иногда диву даюсь. Мужик, ты гений! Я ни разу не сталкивался с подобными формулами и на обучении в оффлайн школе такому не учат. Мне очень понравилась формула, уже использую в своей верстке. Спасибо!) Развития твоему каналу.
Просто фантастика! Очень нужная вещь! Как обычно крутяка!!!
Ты просто невероятно жизнерадостный) Спасибо за крутой урок и отдельно за мотивацию!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Офигенно!!! Порадовали эмоции, прям улыбнуло тоже!))
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!))
Женя, спасибо огромное. Для меня, как разработчика, который не особо любит верстать контент просто бесценен!!
@FreelancerLifeStyle
4 жыл бұрын
Я рад!
Дякую, Євгене! Це круті формули. Все працює ідеально.
Спасибо большое! Этот адаптив можно использовать не только для размера шрифта, но и для других свойств, которые нужно адаптировать.
А я прекрасно понимаю, почему автор так радуется. Сколько ни пробую, адекватного и тем более бесшовного адаптива, да ещё и нормально настраиваемого - хрен добьёшься. Я бы тоже обрадовался, это как колесо открыть, честное слово. Спасибо за отличный метод. Не так сложно кстати, просто для каждого вида текста свою базовую макетную ширину указываешь, а остальное копируешь. Спасибо!
@FreelancerLifeStyle
2 жыл бұрын
Пожалуйста!
Собственно, материал полезный, подготовлен качественно, имеет новизну. Преподнесен доступно и в положительном ключе. Собственно, лайк)
Офигенно) Вывел годную формулу, вообще супер! А то я мучался с подбором размеров шрифтов для всех экранов и в vw, и в vmax, и с calc пытался. И за миксин спс, буду пробовать, лайк однозначно)
Видно что автор человек идейный, фанат своего дела. Приятно видеть, что развивается не только аудитория но и автор.
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Спасибо огромное за ролик! Сразу же применил в проекте! теперь у меня есть миксин которым я в одну строчку прописываю все свойства шрифта) Было бы классно увидеть еще какие нибудь интересные миксины!
Долго искал, пробовал и всё не мог получить такой результат. Спасибо, спас от бессонных ночей и в конце концов успокоил)
Очень круто, как раз то, что я искал! Пойду применять на практике)
Как и всегда всё круто))) А эмоции просто божественны))))
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! ☺
Очень полезный контент , спасибо , удачи в продвижении 👍🔥💪
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Просто чудо какое -то ))) я не понимаю как это работает под капотом , но триллиард процентов сохраню где нибудь файлик стилевой с формулами )) огромное спасибо )) оттестил на своем макете , просто пушка . Огромное спасибо. Подобные фишки просто бесценны✌️✌️✌️
Класс! Шикарное видео и объяснение! Спасибо тебе за твой труд! Ты лучший!)
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Красавчик. Действительно, даже не знаю, что тут более важно, эмоции от работающего решения или сам приём со шрифтами ) Воодушевление от результата, помогли замотивироваться (устал немного), а рабочий приём, действительно, очень крутой и полезный. Лайк х2
Спасибо за полезный урок!! Жду с интересом каждое новое видео
Фантастика, всегда об этом мечтал! Спасибо!!!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Весьма толково. И педантично. Лайк.
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Спасибо Женя. Ты все очень понятно объясняешь, в отличии от некоторых блогеров.
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Стараюсь!
Вау!! очень крутые уроки, осознанный подход к верстке. Пошел запиливать эту темку себе на сайт)
Ну как всегда) Как только я подумал о миксине - Жека уже показал, рассказал и продемонстрировал) Спасибо , очень классная и качественная фича!
Спасибо тебе огромное. За твои труды. Очень позитивно. И главное понятно.
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Женя, спасибо тебе огромное за метод! Это действительно мега-крутяк всего за пару кликов! Я не понимаю логику людей поставивших дизлайк: у них или не получилось, или они не поняли теории. 2 куска кода в описании работают "на ура" даже в sass и в связке с gulp. Результат действительно шикарный.
Ты самый ЖИВОЙ БЛОГЕР из всех тех, кто занимается этой темой!!! Всегда интересно и приятно смотреть. Это не обычная роботизированная подача фактов с призывом пройти обучение. Видно что ты живешь этим и получаешь истинное удовольствие от того что делаешь!!! СПАСИБО ЗА ТВОИ ТРУДЫ!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо большое! Я рад что нравится!
Очень круто! Спасибо, буду использовать!)
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Как всегда ТОП! Лови лукаса!)
Женя, ты волшебник 🧙♂️, ОГРОМНОЕ СПАСИБО !!!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Все последний видос, я спылесосил уже все что ты говорил за все время) Ты лучший)
Не понимаю, как оно работает,но оно работает^_^ Спасибо, тебя реально приятно слушать, и даже голос не бесит и спать не хочется!
Жека, это просто гениально, сам переделал под себя функцию - теперь можно плавно адаптировать хоть что нибуть (; Спасибо огромное!
Вау,как раз недавно читал статью в телеге с подобной информацией и формулами и, конечно же, как говорится: нифига не понял но очень интересно. И Евгений как всегда прочитал мысли и сделал урок по адаптивному шрифту. Спасибо :)
Спасибо за то что вы делаете , очень помогают ваши видео
Очень классная проделанная работа,спасибо вам)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Сразу вижу предпринимателя-профессионала. Радуется своим продуктом как ребенок!
@FreelancerLifeStyle
4 жыл бұрын
Хех, это да)
Только благодаря тебе разбираю все самые сложные моменты , мерси!)
Очень круто! Спасибо за твои крутые видосы!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Проверено- работает! Будем пробовать применять на проектах. Спасибо))
Просто разрыв. Круто. Очередной лайк и большой Респект! Почему этот метод нигде не описан.
Женя ты гений. Просто по человечески от души спасибо)
Мега крутяк, и правда) очень полезное видео, спасибо!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
сколько эмоций и радости)) Спасибо за видео, то что нужно для ленивых))
Дружище ты вовремя))) я как раз думал как решить этот вопрос)
@FreelancerLifeStyle
4 жыл бұрын
Я рад!
Такое искреннее счастье!) Это прям я, когда у меня самой получилось сделать что-то сложное на JS / jQuery
@FreelancerLifeStyle
4 жыл бұрын
Круто!
Боже да это просто офигенно! Если по этой же самой формуле задавать размер блока с текстом, то поможно подобраить такой размер при котром будут сохранятся переносы слов также как на макете! И не нужно использовать костыли вроде, и неразрывного пробела! Класс! Жека спасибо!!!
Очень круто! Как раз сегодня пригодилось!
Большое спасибо за Вашу работу! Большое спасибо за Ваше видео! Велике спасибі за Ваше відео! Дякую за Ваше відео! 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!
@FreelancerLifeStyle
4 жыл бұрын
Хех) Спасибо!
Дякую, Вам за працю, цей метод просто вогонь!!!
@FreelancerLifeStyle
4 жыл бұрын
Будь ласка
Спасибо за ваши видео, очень четко и понятно
Я вообще чайник в этой сфере, но даже я смог адаптировать свой текст на сайте под мобильные устройства благодаря вам, Спасибо !
Жека видос просто супер!! Спасибо тебе!!!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!