🔴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 это вроде как логично, так-что решение на поверхности пишу я это только потому, что кто-то мог не обратить на это внимание (собственно и я это совершенно случайно заметил), и считаю обязанностью предупредить согильдийцев)
Спасибо большое Вам, Евгений! Не сразу обратил внимание на упрощенную формулу. С длинной - что-то пошло не так. Применил короткую - получилось. Наложил пиксел перфект - все сходится. Но, у меня макет только под дэсктоп, поэтому на 320 просто тупо замерил линейкой. Все сходится. По ресайзингу тоже все идет норм, формула подставляется на разных разрешениях. Будем тестить дальше. Думаю, оч хорошая заморока. Еще раз большое спасибо. Успехов!
Круто, что автор подает материал с такой эмоциональностью. Это очень положительно влияет на процесс просмотра. Кто смотрит Барабекуса, со мной согласятся)))) А про качество материала в предыдущих комментариях все сказано. Хочу пожелать автору поскорее 100к и 1000к подписчиков. Тут уж придется поработать, и не только в свободное время)))
it сфера это то место, где постоянно нужно учиться и находить что-то новое, смотреть на чужие примеры и изобретать свои) Вы один из немногих авторов, которые подают инфу максимально легко и без воды. Тут и новичкам полезно, и бывалые разрабы найдут для себя много нового) отличная подача и в целом качество видосов! Ну и эмоции настоящие, любой разработчик радуется как ребенок, когда всё начинает работать как надо😅☝️ главное не перехвалить 😹спасибо, Жека, за твой позитив😉
Ты самый ЖИВОЙ БЛОГЕР из всех тех, кто занимается этой темой!!! Всегда интересно и приятно смотреть. Это не обычная роботизированная подача фактов с призывом пройти обучение. Видно что ты живешь этим и получаешь истинное удовольствие от того что делаешь!!! СПАСИБО ЗА ТВОИ ТРУДЫ!
И чем, по-твоему, будут заниматься эти 1 млн. новоиспеченных верстальщиков? Сходи на канал с миллионом подписчиков, поймешь почему здесь такого числа никогда не будет.
Я в восторге от интеллектуальной тонкости этого инженерного решения. Не думал, что в вёрстке может потребоваться какое-то математическое вычисление как в языке программирования. Но это решение мне доставило такой интеллектуальный и эстетический кайф, что я не могу выразить словами. Тонко, круто!
А я прекрасно понимаю, почему автор так радуется. Сколько ни пробую, адекватного и тем более бесшовного адаптива, да ещё и нормально настраиваемого - хрен добьёшься. Я бы тоже обрадовался, это как колесо открыть, честное слово. Спасибо за отличный метод. Не так сложно кстати, просто для каждого вида текста свою базовую макетную ширину указываешь, а остальное копируешь. Спасибо!
$gratitude: 100%; Мало того что материал бомбезный, так благодаря ему еще и выкупил интерполяцию в sass. (Написал простенький миксин, чтобы быстрее шрифты подключать и все мозги прокипятил в попытках использовать переменные в url. А оно вот как просто оказывается!) Спасибо огромное! Лучший блогер по фронту.
Недавно на тебя наткнулся и спасибо судьбе за это, эта формула просто что-то с чем то) Спасибо огромное) Ожидаю в дальнейшем ещё больше полезной информации для web разработчика)
Это невероятно. Такая простая формула, а так сильно облегчит нам жизнь. Жека, спасибо огромное за твои открытия, старания и за самый прекрасный IT материал в бесплатном доступе. Уже поддержал на патреоне, жду еще больше нового крутого контента!
Дуже чудове відео для пояснення адаптивності шрифта, і це супер бомбезна формула, хочу для автора що тепер є простіший спосіб - це приблизно так, font-size: clamp(1em, 1vw, 2em); Дякуючи цьому відео, поясненню і таким емоціям я знайшов цей запис.
Смотрю твой канал и иногда диву даюсь. Мужик, ты гений! Я ни разу не сталкивался с подобными формулами и на обучении в оффлайн школе такому не учат. Мне очень понравилась формула, уже использую в своей верстке. Спасибо!) Развития твоему каналу.
Вижу огонь в твоих глазах и это круто. У тебя талант (хотя думаю за этим скрыт реальный опыт и серьёзная подготовка к видео) к подачи материала. Я пересмотрел около 20 разных топ it блогеров и могу с уверенностью сказать, у тебя получается лучше всех. Минимум воды, максимум рабочих актуальных схем верстки и реальный позитив. Буду с удовольствием следить за продвижением твоего канала и ждать новых видео. Большая просьба, не скатывайся со временем мусоля одну тему по 30 минут как другие, и тебе гарантирован успех. Удачи.
Пересмотрел уже половину видео на этом канал! Женя, огромное спасибо за Вам за Ваш труд! Здесь супер качественный и ценный контент, которы меня уже несколько раз очень выручил!
Евгений, вы просто ГЕНИЙ) Огромная благодарочка за такую работу!) Реально зачетная тема) Давай еще больше подобных лайфхаков) Большой ЛУКАС! И быстрее уже 100к
Боже да это просто офигенно! Если по этой же самой формуле задавать размер блока с текстом, то поможно подобраить такой размер при котром будут сохранятся переносы слов также как на макете! И не нужно использовать костыли вроде, и неразрывного пробела! Класс! Жека спасибо!!!
Женя, спасибо тебе огромное за метод! Это действительно мега-крутяк всего за пару кликов! Я не понимаю логику людей поставивших дизлайк: у них или не получилось, или они не поняли теории. 2 куска кода в описании работают "на ура" даже в sass и в связке с gulp. Результат действительно шикарный.
Просто чудо какое -то ))) я не понимаю как это работает под капотом , но триллиард процентов сохраню где нибудь файлик стилевой с формулами )) огромное спасибо )) оттестил на своем макете , просто пушка . Огромное спасибо. Подобные фишки просто бесценны✌️✌️✌️
Большое спасибо за Вашу работу! Большое спасибо за Ваше видео! Велике спасибі за Ваше відео! Дякую за Ваше відео! 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!
Полюбил я тебя) Классные ролики! Куча работы проделано и все в темпе без просадок) так держать бро! Ты мне помог уже во многих местах, обязательно отправлю тебе кэш!
Рад что это появилось в СНГ комюнити . Приблизительную формулу можно встретишь на забугорных форумах, правда там ее использовали для адаптации шрифта под верстку писем так как media работает худо. Спасибо за урок и подробное объяснение . Однозначно сразу в закладки быстрого доступа)
Начало твоих видео всегда заставляет улыбаться. "Приве-е-ет! Это фрилансер по жизни!" с улыбкой на лице сильно отличается от монотонного "Привет. С вами N" и т.д. и т.п. других ютуберов.
супер! только на неделе думал как это можно сделать и тут вот! по упрощенной формуле под видео работает шикарно!!! не знал, что можно значения писать в виде формулы. спасибо!
Здравствуйте, спасибо за урок!) Кстати, можно модернизировать без использования медиа запроса: font-size: calc(24px + 16 * ((100vw - 360px) / 920)); //24рх - минимальный шрифт; 16 - Прибавочное число, (разница между максимальным и минимальным шрифтами(40-24)); // 100vw - реальная ширина экрана; 360рх - минимальная ширина экрана; 920 - разница между шириной макета и минимальной шириной экрана
Египетскаясила! Я метровые медиа запросы расписываю, пробую, выясняю, а тут вот оно как. Таким методом моя сss сократится на треть =) Спасибо и за науку и за атмосферу видео.
Спасибо большое, сейчас смотрю уроки, так сказать учусь, я немного упустил времени, но надеюсь догоню,спасибо большое за такие уроки! Скоро диплом, пора учится
Красавчик. Действительно, даже не знаю, что тут более важно, эмоции от работающего решения или сам приём со шрифтами ) Воодушевление от результата, помогли замотивироваться (устал немного), а рабочий приём, действительно, очень крутой и полезный. Лайк х2
Женя, это невероятно!! Дай Бог тебе здоровья и твоей семье. Я причем попробовал ту же формулу подставить width для div, И ОНА РАБОТАЕТ!! Я таким образом подстроил изменения величины логотипа например😉👍 Спасибо огромное🙏
Ваааау!! Вообще огонь! А я вот для себе по аналогии сделал ещё и для свойства line-height. И теперь ещё сильнее радуюсь! =) Эта формула пушка! Спасибо большое.))))))
Евгений, я тут разбирался с адаптивными шрифтами и хочу поделится формулой которая, как мне кажется, немного проще и не требует медиазапроса. Формула следующая: calc(55px + (55 - 18) * (100vw - 1440px) / (1440 - 320)) , где 55px - это размер шрифта при ширине экрана 1440px, 18px - размер шрифта при 320px . Когда размер въюпорта равен 1440px второе слагаемое равно нулю и размер шрифта равен 55px. Когда значение вьюпорта меньше 1440px разность в скобках отрицательная и при достижении 320px результатом деления выражений в скобках будет -1, шрифт при этом будет равен 18px. При увеличении въюпорта разность в скобках будет положительной и шрифт будет увеличиваться. Напиши, пожалуйста, ответ можно ли ее использовать, и не допустил ли я ошибки, может я что-то не учел.
Круто, теперь буду пробовать везде использовать формулу. Спасибо за сокращённую версию в описании. В этом мире всё должно быть таким адаптивным. Чтобы посмотреть размер можно навести инструментом выбора элемента)
Офигенно) Вывел годную формулу, вообще супер! А то я мучался с подбором размеров шрифтов для всех экранов и в vw, и в vmax, и с calc пытался. И за миксин спс, буду пробовать, лайк однозначно)
Вау,как раз недавно читал статью в телеге с подобной информацией и формулами и, конечно же, как говорится: нифига не понял но очень интересно. И Евгений как всегда прочитал мысли и сделал урок по адаптивному шрифту. Спасибо :)
Я до этого пользовался другим месксином , который был разбит на разрешения самое большое, маленькое и среднее . Он меня устраивал в своей быстроте и легкостн , но после этого урока я естественно возьму на вооружение данный вариант . Женя, продолжай в том же духе у тебя один из самых годных каналов на просторах Ютуба, так держать !!!!
🔴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 Да это Круто!
Не знаю других влогеров, которые рассказывали бы с таким воодушевлением.
Видео огонь)
Спасибо!
Евгений, ты не фрилансер, ты - ПРОФЕССОР! ))))
Спасибо))
Круто, что автор подает материал с такой эмоциональностью. Это очень положительно влияет на процесс просмотра. Кто смотрит Барабекуса, со мной согласятся)))) А про качество материала в предыдущих комментариях все сказано. Хочу пожелать автору поскорее 100к и 1000к подписчиков. Тут уж придется поработать, и не только в свободное время)))
Спасибо! Я постараюсь)
it сфера это то место, где постоянно нужно учиться и находить что-то новое, смотреть на чужие примеры и изобретать свои) Вы один из немногих авторов, которые подают инфу максимально легко и без воды. Тут и новичкам полезно, и бывалые разрабы найдут для себя много нового) отличная подача и в целом качество видосов! Ну и эмоции настоящие, любой разработчик радуется как ребенок, когда всё начинает работать как надо😅☝️ главное не перехвалить 😹спасибо, Жека, за твой позитив😉
Все верно, я рад как ребенок)) Спасибо!
Согласна!
оооо очень полезная штука, вечно проблемы были со шрифтами, спасибо !
Пожалуйста!
Ты самый ЖИВОЙ БЛОГЕР из всех тех, кто занимается этой темой!!! Всегда интересно и приятно смотреть. Это не обычная роботизированная подача фактов с призывом пройти обучение. Видно что ты живешь этим и получаешь истинное удовольствие от того что делаешь!!! СПАСИБО ЗА ТВОИ ТРУДЫ!
Спасибо большое! Я рад что нравится!
Скільки щирості та дитячої радості! You made my day! Дякую!!!
Сразу вижу предпринимателя-профессионала. Радуется своим продуктом как ребенок!
Хех, это да)
Ну никак не нарадуюсь, что нашла этот канал! СПАСИБО тебе за такой качественный материал!
Пожалуйста!
Я не понимаю,почему у тебя до сих пор нету как минимум 1миллиона подписчиков,такие топовые видосы.Удачи тебе в продвижении канала!
Та на подобных каналах всегда маловато подписчиков.мало кто хочет обучаться...Они лучше посмотрят что будет с арбузом если сбросить его с 5 этажа)
@@ДенчикШмель-ъ6ц ну что с арбузом, тоже интересно.
Спасибо!
И чем, по-твоему, будут заниматься эти 1 млн. новоиспеченных верстальщиков? Сходи на канал с миллионом подписчиков, поймешь почему здесь такого числа никогда не будет.
@@DmitriyVereschagin почему ??? По моему мнению канал очень хороший. Например не понимаю, чего не хватает в этом канале. Для того, чтобы был миллион.
Я в восторге от интеллектуальной тонкости этого инженерного решения. Не думал, что в вёрстке может потребоваться какое-то математическое вычисление как в языке программирования. Но это решение мне доставило такой интеллектуальный и эстетический кайф, что я не могу выразить словами. Тонко, круто!
В конце ролика восхитительное выражение лица.
У меня было такое когда первый раз подключил :hover; .
Спасибо за знания и настроение!
Видно что автор человек идейный, фанат своего дела. Приятно видеть, что развивается не только аудитория но и автор.
Спасибо!
А я прекрасно понимаю, почему автор так радуется. Сколько ни пробую, адекватного и тем более бесшовного адаптива, да ещё и нормально настраиваемого - хрен добьёшься. Я бы тоже обрадовался, это как колесо открыть, честное слово. Спасибо за отличный метод. Не так сложно кстати, просто для каждого вида текста свою базовую макетную ширину указываешь, а остальное копируешь. Спасибо!
Пожалуйста!
$gratitude: 100%; Мало того что материал бомбезный, так благодаря ему еще и выкупил интерполяцию в sass. (Написал простенький миксин, чтобы быстрее шрифты подключать и все мозги прокипятил в попытках использовать переменные в url. А оно вот как просто оказывается!) Спасибо огромное! Лучший блогер по фронту.
Спасибо!
Недавно на тебя наткнулся и спасибо судьбе за это, эта формула просто что-то с чем то) Спасибо огромное) Ожидаю в дальнейшем ещё больше полезной информации для web разработчика)
Будет!
Вот это я понимаю контент!!!
Нигде еще не встречал подобной темы. Жека ,ты большой молодец!!!!!
Спасибо!
Жека, это нереально крутая штука! Не перестаю повторять: ты капитальный красавчик! Пойду юзать твою фичу в новом проекте. Спасибо!
Пожалуйста!
Это невероятно. Такая простая формула, а так сильно облегчит нам жизнь. Жека, спасибо огромное за твои открытия, старания и за самый прекрасный IT материал в бесплатном доступе. Уже поддержал на патреоне, жду еще больше нового крутого контента!
Спасибо!
Да это ж гребаная магия. Просто браво!!!
Спасибо!
Дуже чудове відео для пояснення адаптивності шрифта, і це супер бомбезна формула, хочу для автора що тепер є простіший спосіб - це приблизно так, font-size: clamp(1em, 1vw, 2em); Дякуючи цьому відео, поясненню і таким емоціям я знайшов цей запис.
Жека, спасибо за труды и эмоции. В наше время мало кто готов делится своими наработками. Но ты не из тех и за это тебе отдельный респект и уважуха! 😉👍
Спасибо!
Немного переделал формулу, запихнул её в clamp(), теперь даже при безбожном зуме могу не боятся за верхнюю и нижнию границу размера шрифта. Дякую.
Смотрю твой канал и иногда диву даюсь. Мужик, ты гений! Я ни разу не сталкивался с подобными формулами и на обучении в оффлайн школе такому не учат. Мне очень понравилась формула, уже использую в своей верстке. Спасибо!)
Развития твоему каналу.
Блин, твои формулы реально крутая тема, адаптивы делать одно удовольствие :D
Весьма толково. И педантично. Лайк.
Спасибо!
Вижу огонь в твоих глазах и это круто. У тебя талант (хотя думаю за этим скрыт реальный опыт и серьёзная подготовка к видео) к подачи материала. Я пересмотрел около 20 разных топ it блогеров и могу с уверенностью сказать, у тебя получается лучше всех. Минимум воды, максимум рабочих актуальных схем верстки и реальный позитив. Буду с удовольствием следить за продвижением твоего канала и ждать новых видео. Большая просьба, не скатывайся со временем мусоля одну тему по 30 минут как другие, и тебе гарантирован успех. Удачи.
Дякую, Вам за працю, цей метод просто вогонь!!!
Будь ласка
Женя, спасибо огромное. Для меня, как разработчика, который не особо любит верстать контент просто бесценен!!
Я рад!
Как всегда- информативно, познавательно и позитив просто зашкаливает! Евгений! Ты великий человек!
Спасибо!
Чувак то что я увидел в данном видео это даже не бомба, это просто мать-бомба, Я в восхищении!!!!!!!!!!!!!!!
спасибо!
Пересмотрел уже половину видео на этом канал! Женя, огромное спасибо за Вам за Ваш труд! Здесь супер качественный и ценный контент, которы меня уже несколько раз очень выручил!
Я рад!
Евгений, вы просто ГЕНИЙ) Огромная благодарочка за такую работу!) Реально зачетная тема) Давай еще больше подобных лайфхаков)
Большой ЛУКАС! И быстрее уже 100к
Спасибо!
Словами не передать благодарность за такой труд! Желаю дальнейшего развития канала, чтобы больше людей получали такую важную и интересную информацию!
Спасибо Женя. Ты все очень понятно объясняешь, в отличии от некоторых блогеров.
Спасибо! Стараюсь!
Как всегда, все просто супер! Однозначно лайк
Спасибо!
Спасибо, только не давно искал инфу на адаптив шрифта, нарыл только то, что не понятно. Очень круто, спасибо тебе большое. Прям огонёк какой-то 🔥
Я рад!
Боже да это просто офигенно! Если по этой же самой формуле задавать размер блока с текстом, то поможно подобраить такой размер при котром будут сохранятся переносы слов также как на макете! И не нужно использовать костыли вроде, и неразрывного пробела! Класс! Жека спасибо!!!
Женя, спасибо тебе огромное за метод! Это действительно мега-крутяк всего за пару кликов! Я не понимаю логику людей поставивших дизлайк: у них или не получилось, или они не поняли теории. 2 куска кода в описании работают "на ура" даже в sass и в связке с gulp. Результат действительно шикарный.
Очень круто, долго искала как сделать так чтобы шрифт подходил под все экраны.Очень весело рассказываешь!)))
Спасибо!
крутой гайд, сразу показывает насколько упрощает жизнь препроцессор, большое спасибо автору, возьму себе на заметку этот трюк :)
Пожалуйста!
Ты просто невероятно жизнерадостный)
Спасибо за крутой урок и отдельно за мотивацию!
Пожалуйста!
Просто чудо какое -то ))) я не понимаю как это работает под капотом , но триллиард процентов сохраню где нибудь файлик стилевой с формулами )) огромное спасибо )) оттестил на своем макете , просто пушка . Огромное спасибо. Подобные фишки просто бесценны✌️✌️✌️
Офигенно!!! Порадовали эмоции, прям улыбнуло тоже!))
Спасибо!))
Большое спасибо за Вашу работу!
Большое спасибо за Ваше видео! Велике спасибі за Ваше відео! Дякую за Ваше відео! 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!
Хех) Спасибо!
Полюбил я тебя) Классные ролики! Куча работы проделано и все в темпе без просадок) так держать бро!
Ты мне помог уже во многих местах, обязательно отправлю тебе кэш!
Круто!) Такой воодушевленный!) Каеф! Ты молодец, сделал великолепную работу!) И с нами поделился) Спасибо!!!
Пожалуйста!
Женя, спасибо тебе за этот крутой урок! Обучаюсь верстке по твоим видео, это лучшее во всем интернете что я видел!
Я вообще чайник в этой сфере, но даже я смог адаптировать свой текст на сайте под мобильные устройства благодаря вам, Спасибо !
Рад что это появилось в СНГ комюнити . Приблизительную формулу можно встретишь на забугорных форумах, правда там ее использовали для адаптации шрифта под верстку писем так как media работает худо. Спасибо за урок и подробное объяснение . Однозначно сразу в закладки быстрого доступа)
Спасибо!
Фантастика, всегда об этом мечтал! Спасибо!!!
Пожалуйста!
Блин чувак это круто! Я раньше решал такое с помощью заклинаний и лапки голубя.... но на смену пришла математика фрилансера по жизни) спасибо!
Вот именно так нужно относиться к любимому делу. Спасибо за ваш труд, Евгений.
Вместе с полезными знаниями, приятная доза позитива!!! Так держать!!!! =)))))
прям настроение даже поднимается, когда смотришь с каким счастьем Женя все рассказывает!))) Классное видео!!!)
Конечно чудо! Большое спасибо, что делитесь такими крутыми вещами!
Начало твоих видео всегда заставляет улыбаться. "Приве-е-ет! Это фрилансер по жизни!" с улыбкой на лице сильно отличается от монотонного "Привет. С вами N" и т.д. и т.п. других ютуберов.
Я рад!
@@FreelancerLifeStyle Спасибо тебе за отличный контент!
Женя. Огромное спасибо тебе за проделанную тобою работу.
Ну что сказать, лайк однозначно, причем это правило можно использовать не только в шрифтах, но и в высоте, например.
Все верно!
супер! только на неделе думал как это можно сделать и тут вот! по упрощенной формуле под видео работает шикарно!!! не знал, что можно значения писать в виде формулы. спасибо!
Здравствуйте, спасибо за урок!)
Кстати, можно модернизировать без использования медиа запроса:
font-size: calc(24px + 16 * ((100vw - 360px) / 920));
//24рх - минимальный шрифт; 16 - Прибавочное число, (разница между максимальным и минимальным шрифтами(40-24));
// 100vw - реальная ширина экрана; 360рх - минимальная ширина экрана; 920 - разница между шириной макета и минимальной шириной экрана
Долго искал, пробовал и всё не мог получить такой результат. Спасибо, спас от бессонных ночей и в конце концов успокоил)
Спасибо большое! Этот адаптив можно использовать не только для размера шрифта, но и для других свойств, которые нужно адаптировать.
Блин, уже давно ничего по вёрстке не смотрел, больше js углубляюсь но вот это видео 😘😘😘
Спасибо, Жень!
Пожалуйста!
Спасибо Жек, это бомба!)
Очень заметно как ты сияешь от такого открытия))
Да, но оказывается подобное уже было) В описании упрощенная формула
@@FreelancerLifeStyle мне твоя по душе)
Египетскаясила! Я метровые медиа запросы расписываю, пробую, выясняю, а тут вот оно как. Таким методом моя сss сократится на треть =) Спасибо и за науку и за атмосферу видео.
Пожалуйста!
Собственно, материал полезный, подготовлен качественно, имеет новизну. Преподнесен доступно и в положительном ключе. Собственно, лайк)
У Вас такие классные видео, они меня захватывают! Приятно видеть настолько увлеченного ЧЕЛОВЕКА! Спасибо!!!
Месяц назад писал вопрос в чате, рылся на форумах, кроме vw rem em параметров ничего не нашёл, а тут решение очень изящное просто огонь
Как и всегда всё круто))) А эмоции просто божественны))))
Спасибо! ☺
Женя, ты волшебник 🧙♂️, ОГРОМНОЕ СПАСИБО !!!
Пожалуйста!
Миксинчик огонь!!! Впрочем как и сам автор!!!
Спасибо!
Дружище ты вовремя))) я как раз думал как решить этот вопрос)
Я рад!
Спасибо тебе огромное. За твои труды. Очень позитивно. И главное понятно.
Пожалуйста!
Спасибо большое, сейчас смотрю уроки, так сказать учусь, я немного упустил времени, но надеюсь догоню,спасибо большое за такие уроки! Скоро диплом, пора учится
Пожалуйста!
Думал будут em и rem, а тут как закрутил)) Спс за годноту!
Пожалуйста!
Красавчик.
Действительно, даже не знаю, что тут более важно, эмоции от работающего решения или сам приём со шрифтами )
Воодушевление от результата, помогли замотивироваться (устал немного), а рабочий приём, действительно, очень крутой и полезный. Лайк х2
Просто разрыв. Круто. Очередной лайк и большой Респект! Почему этот метод нигде не описан.
Женя, это невероятно!! Дай Бог тебе здоровья и твоей семье. Я причем попробовал ту же формулу подставить width для div, И ОНА РАБОТАЕТ!! Я таким образом подстроил изменения величины логотипа например😉👍 Спасибо огромное🙏
Ваааау!! Вообще огонь! А я вот для себе по аналогии сделал ещё и для свойства line-height. И теперь ещё сильнее радуюсь! =) Эта формула пушка! Спасибо большое.))))))
это просто офигенно, моя верстка стала еще лучше, снимаю шляпу за то что ты делаешь для нас
Не понимаю, как оно работает,но оно работает^_^ Спасибо, тебя реально приятно слушать, и даже голос не бесит и спать не хочется!
Евгений, я тут разбирался с адаптивными шрифтами и хочу поделится формулой которая, как мне кажется, немного проще и не требует медиазапроса. Формула следующая: calc(55px + (55 - 18) * (100vw - 1440px) / (1440 - 320)) , где 55px - это размер шрифта при ширине экрана 1440px, 18px - размер шрифта при 320px . Когда размер въюпорта равен 1440px второе слагаемое равно нулю и размер шрифта равен 55px. Когда значение вьюпорта меньше 1440px разность в скобках отрицательная и при достижении 320px результатом деления выражений в скобках будет -1, шрифт при этом будет равен 18px. При увеличении въюпорта разность в скобках будет положительной и шрифт будет увеличиваться. Напиши, пожалуйста, ответ можно ли ее использовать, и не допустил ли я ошибки, может я что-то не учел.
Смотри описание урока
Такое искреннее счастье!) Это прям я, когда у меня самой получилось сделать что-то сложное на JS / jQuery
Круто!
Жирнючий лайк! Спас просто на дэдлайне!
Дякую, Євгене!
Це круті формули. Все працює ідеально.
Круто, теперь буду пробовать везде использовать формулу. Спасибо за сокращённую версию в описании. В этом мире всё должно быть таким адаптивным. Чтобы посмотреть размер можно навести инструментом выбора элемента)
Евгений, спасибо большое за видео! Это как раз то, что я искала для своего проекта. Вы мне очень помогли! =*
все видео сидел и смеялся с реакции, прям зарядил энергией) Спасибо что ты делаешь такие видосики!!!
Офигенно) Вывел годную формулу, вообще супер! А то я мучался с подбором размеров шрифтов для всех экранов и в vw, и в vmax, и с calc пытался. И за миксин спс, буду пробовать, лайк однозначно)
Вау,как раз недавно читал статью в телеге с подобной информацией и формулами и, конечно же, как говорится: нифига не понял но очень интересно. И Евгений как всегда прочитал мысли и сделал урок по адаптивному шрифту. Спасибо :)
Потрясающе! Шикарный урок, подача информация, материал, супер! ✌
Очень круто! Спасибо, буду использовать!)
Пожалуйста!
Класс! Шикарное видео и объяснение! Спасибо тебе за твой труд! Ты лучший!)
Пожалуйста!
Подивився багато твоїх відео за останні 2 місяця, залишу хоч один коментар) я в захваті від твоєї роботи! буду пробувати цей метод з шрифтами)
Ты просто огонь! Становишься народным....Никогда не делай это платным...выпадут волосы
Афигеть, очень круто.Спасибо , взял на вооружение!)
Я рад!
Я до этого пользовался другим месксином , который был разбит на разрешения самое большое, маленькое и среднее . Он меня устраивал в своей быстроте и легкостн , но после этого урока я естественно возьму на вооружение данный вариант . Женя, продолжай в том же духе у тебя один из самых годных каналов на просторах Ютуба, так держать !!!!
Спасибо!