Последовательное и наглядное пояснение особенностей единиц измерения. Очень полезно, особенно новичкам. Спасибо автору. За 9 лет разработки, часто приходится работать с легаси кодом (чужим кодом, чужой вёрсткой) и от ремов и емов больше проблем, чем пользы. Как по мне - чем понятней - тем проще, что бы любой спец мог после тебя разобраться в том, как вычисляются размеры шрифтов и внести доработки. Это важнейший приоритет. И по поводу дизайна согласен. с приходов гридов и флексов стандартизация сеток, ритмов и типографики на столько разная, что чёрт ногу сломит. Что бы не усложнять еще больше не усложнять коллегам рабочий процесс - лучше использовать простые и универсальные единицы - пиксели.
@@kenobi6027 да. даже в тех тема, которые тебе хорошо знакомы бывает что то полезное. Иногда даже что то новое узнаёшь. Конкретно тут орошая подача материала и поэтому я лайкнул и прокомментировал.
На счёт em-ов категорически не согласен. По сути, em - это динамически изменяемая единица, которая работает по формуле N * em. Она отлично подходит для ситуация, когда важно в динамике сохранить пропорции элемента, например в анимациях. Предположим, перед нами стоит задача: сделать, как бы, выплывающую из далека кнопку; у кнопки есть лейбл и лид-иконка, если мы хотим, чтобы кнопка «выплывала» из далека - все её составляющие должны пропорционально изменяться. Скажем, что расстояние между иконкой и лейблом в финальном положении должно составлять 8px, fontSize лейбла 16px, а размер иконки должен соответствовать размеру лейбла. В таком случае, мы можем указать расстояние между иконкой и лейблом как 0,5em, а размер иконки 1em. Таким нехитрым образом получим кнопку, которую можно как угодно увеличивать, уменьшать, а её пропорции останутся неизменными. em-ы нужны не для того, чтобы на них всю страницу целиком верстать, а для того, чтобы реже использовать calc() в таких вот ситуациях.
Анимации с изменением размеров делаются через трансформ, так что не очень понимаю в чем поинт) Я бы использовал em только для letter spacing, в остальном не вижу пользы
По поводу rem я наоборот согласен. Прочел статью, что надо использовать rem, чтобы пользователь мог менять только шрифт, начал использовать через sass скрипт, потом подумал, что в каждом первом макете, кроме макета в стиле "просто полотно текста", при таких действиях пользователя весь тщательно вылизанный дизайн ломается, в результате чего смысла в таких "удобствах" вообще никакого, вред один. Засомневался, полез искать дополнительных разъяснений. Ну и вот, услышал свои мысли.
про rem согласен, em все таки бывают полезны, например для паддингов в кнопках, маргинов между текстами, текстовых инпутов, в общем для любых компонентов у которых отступы можно привязать к размеру шрифта, так при изменении шрифта пропорционально изменятся отступы, минус что постоянно с калькулятором нужно вычислять значения
Полностью согласен. Используйте пиксели и не заморачивайтесь. Исключение разве что скейлинг (масштабирование на супер широких экранах > 1920px ) - вот при нем понадобятся ремы
Привет, классное видео, спасибо. Но я вот приверженец все таки конечно пикселей, но недавно столкнулся с требованием чтобы все было в ремах. И тут получилось так что при адаптиве я использовал calc и получилось так что при ресейзе, весь проект пропорционально уменьшается, до мобилки, потом снова включается такая штука как font-size: 10px и уже в мобилке все размеры сделаны по макету (шрифты и размеры меньше). И тут у меня такой диссонанс получился, что можно очень легко сделать адаптив с помощью ремов )) Можете, пожалуйста такой вариант применения ремов рассмотреть? П.с. В компании которой начинал работать (веб студия) при сборке проекта на Galp в итоге получалось все на ремах и емах.
Полезное видео. У одного разработчика видел спец js функцию adaptiveValue где можно поставить максимальный и минимальный размер шрифта в размере экрана. Очень удобно использовать для адаптива марджинов и падингов. А так же помогает с размером шрифтов.
это делается с помощью css clamp(), нужно только немножко уметь в математику и гуглить, к примеру "adaptive css clamp()", а для ленивых уже есть онлайн генераторы, которые генерируют правильный clamp(), когда можно плавно менять всё что угодно в пределах заданных размеров ширины или высоты экрана. вот пример, где использован адаптивный clamp() с заданными мин. (750) и макс. (1200) шириной экрана и мин. макс. значениями, которые меняются плавно в пределах заданных границ экрана. задан padding-block (мин. 16, макс. 48) у слоя и font-size (мин. 16, макс. 32) у текста: padding-inline: clamp( 1rem , -2.3333333333rem + 7.1111111111vw , 3rem ); font-size: clamp( 1rem , -0.6666666667rem + 3.5555555556vw , 2rem ); естественно в голове такое не посчитать, поэтому используются онлайн генераторы или функции препроцессора (в sass можно легко сделать, имея правильную формулу расчета).
@@maxgraph чтобы в мениазапросах меньше правил писать, только размер шрифта, а отступы автоматически поменяются. Но опять же, зависит от макета, может придётся поправлять, тогда пиксели )
em - бесполезная вещь... =))))))))))) берем кнопку и всем её внутренним элементам (иконкам, тексту и т.д.) задаем размеры в em. теперь добавляем к самой кнопке модификатор размера, к примеру .button--large { font-size: 1.2rem } или .button--small { font-size: .8rem } . мы используем rem для родителя для четкого указания размера, а em - дочерним, зависимым элементам для динамического изменения размера, в зависимости от модификаторов, применяемых к родителю. это самый простой, наглядный и используемый в реальных работах пример использования и взаимодействия em и rem =))
@@maxgraph тупой ютуб режет все ссылки в комментариях - кодепен . ио /9poiiia/pen/JjmZqaX?editors=0100 это пример кода, а то ты явно не понимаешь о чем я выше написал. посмотри как делаются модификаторы в пикселях и в ремах.
@@izzy7541 для чего - попробуй загуглить статьи, где подробно разжевано для чего. на том же css-tricks куча статей с подробным разбором и с примерами. читай-не-хочу. Разве есть дизайн-системы где относительные размеры нужны? Вряд ли - хорошо, уговорил =) давай отменим все css фреймворки, включая bootstrap, uikit, materialize css и т.д. и т.п.
@@hjetwd я больше опираясь на практический опыт верстки дизайн систем. Зачем мне статьи про коня в вакууме? Не делают подобное в дизайн системах, так-как там вся типографика до миллиметра проработана. А как раз там и нужна вариативность
Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт. Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
Последовательное и наглядное пояснение особенностей единиц измерения. Очень полезно, особенно новичкам. Спасибо автору.
За 9 лет разработки, часто приходится работать с легаси кодом (чужим кодом, чужой вёрсткой) и от ремов и емов больше проблем, чем пользы.
Как по мне - чем понятней - тем проще, что бы любой спец мог после тебя разобраться в том, как вычисляются размеры шрифтов и внести доработки. Это важнейший приоритет.
И по поводу дизайна согласен. с приходов гридов и флексов стандартизация сеток, ритмов и типографики на столько разная, что чёрт ногу сломит. Что бы не усложнять еще больше не усложнять коллегам рабочий процесс - лучше использовать простые и универсальные единицы - пиксели.
А вы даже через 9 лет работы смотрите такие видосы?
@@kenobi6027 да. даже в тех тема, которые тебе хорошо знакомы бывает что то полезное. Иногда даже что то новое узнаёшь. Конкретно тут орошая подача материала и поэтому я лайкнул и прокомментировал.
Спасибо: в итоге видишь и мнение автора и комменты, которые не согласны, и для себя выбираешь золотую середину. Каждвй найдет под себя)
Как всегда подача материала навысоте. Лайк в поддержку канала! Максим, ты - лучший. Продолжай нас радовать качественным контентом
Спасибо)
На счёт em-ов категорически не согласен. По сути, em - это динамически изменяемая единица, которая работает по формуле N * em. Она отлично подходит для ситуация, когда важно в динамике сохранить пропорции элемента, например в анимациях.
Предположим, перед нами стоит задача: сделать, как бы, выплывающую из далека кнопку; у кнопки есть лейбл и лид-иконка, если мы хотим, чтобы кнопка «выплывала» из далека - все её составляющие должны пропорционально изменяться. Скажем, что расстояние между иконкой и лейблом в финальном положении должно составлять 8px, fontSize лейбла 16px, а размер иконки должен соответствовать размеру лейбла. В таком случае, мы можем указать расстояние между иконкой и лейблом как 0,5em, а размер иконки 1em. Таким нехитрым образом получим кнопку, которую можно как угодно увеличивать, уменьшать, а её пропорции останутся неизменными.
em-ы нужны не для того, чтобы на них всю страницу целиком верстать, а для того, чтобы реже использовать calc() в таких вот ситуациях.
Анимации с изменением размеров делаются через трансформ, так что не очень понимаю в чем поинт)
Я бы использовал em только для letter spacing, в остальном не вижу пользы
Классная тема! Объяснил очень хорошо! Супер!
По поводу rem я наоборот согласен. Прочел статью, что надо использовать rem, чтобы пользователь мог менять только шрифт, начал использовать через sass скрипт, потом подумал, что в каждом первом макете, кроме макета в стиле "просто полотно текста", при таких действиях пользователя весь тщательно вылизанный дизайн ломается, в результате чего смысла в таких "удобствах" вообще никакого, вред один.
Засомневался, полез искать дополнительных разъяснений. Ну и вот, услышал свои мысли.
Поддерживаю! Проценты легко настраиваются прямо на странице и легко рассчитываются calc()
про rem согласен, em все таки бывают полезны, например для паддингов в кнопках, маргинов между текстами, текстовых инпутов, в общем для любых компонентов у которых отступы можно привязать к размеру шрифта, так при изменении шрифта пропорционально изменятся отступы, минус что постоянно с калькулятором нужно вычислять значения
В целом удобно, но не то чтобы сильно нужно
Полностью согласен. Используйте пиксели и не заморачивайтесь. Исключение разве что скейлинг (масштабирование на супер широких экранах > 1920px ) - вот при нем понадобятся ремы
> 1920 px это уже не суперширокие, это обыденность
Ctrl + же. А еще у меня уже много лет в винде стоит общее масштабирование шрифта в системе 125%. И мне тоже никакие ремы не нужны.
Благодарю!
Привет, классное видео, спасибо. Но я вот приверженец все таки конечно пикселей, но недавно столкнулся с требованием чтобы все было в ремах. И тут получилось так что при адаптиве я использовал calc и получилось так что при ресейзе, весь проект пропорционально уменьшается, до мобилки, потом снова включается такая штука как font-size: 10px и уже в мобилке все размеры сделаны по макету (шрифты и размеры меньше). И тут у меня такой диссонанс получился, что можно очень легко сделать адаптив с помощью ремов )) Можете, пожалуйста такой вариант применения ремов рассмотреть? П.с. В компании которой начинал работать (веб студия) при сборке проекта на Galp в итоге получалось все на ремах и емах.
Полезное видео. У одного разработчика видел спец js функцию adaptiveValue где можно поставить максимальный и минимальный размер шрифта в размере экрана. Очень удобно использовать для адаптива марджинов и падингов. А так же помогает с размером шрифтов.
это делается с помощью css clamp(), нужно только немножко уметь в математику и гуглить, к примеру "adaptive css clamp()", а для ленивых уже есть онлайн генераторы, которые генерируют правильный clamp(), когда можно плавно менять всё что угодно в пределах заданных размеров ширины или высоты экрана. вот пример, где использован адаптивный clamp() с заданными мин. (750) и макс. (1200) шириной экрана и мин. макс. значениями, которые меняются плавно в пределах заданных границ экрана. задан padding-block (мин. 16, макс. 48) у слоя и font-size (мин. 16, макс. 32) у текста:
padding-inline: clamp( 1rem , -2.3333333333rem + 7.1111111111vw , 3rem );
font-size: clamp( 1rem , -0.6666666667rem + 3.5555555556vw , 2rem );
естественно в голове такое не посчитать, поэтому используются онлайн генераторы или функции препроцессора (в sass можно легко сделать, имея правильную формулу расчета).
@@Roman-08-q9c согласен =) для старых браузеров - годная вещь
а как на счет clamp для "резинового" шрифта? Хорошая практика?
Я считаю что плохая. Шрифт должен зависеть либо от базовой единицы, либо от масштаба сайта
4:25 для заголовков, параграфов margin-bottom в еm
Зачем?
@@maxgraph чтобы в мениазапросах меньше правил писать, только размер шрифта, а отступы автоматически поменяются. Но опять же, зависит от макета, может придётся поправлять, тогда пиксели )
Хорош, это может быть очень полезно
Начал учить верстку , не понял этих рем мем хее...м . Зачем они, если можно просто медиа запрос сделать
А как насчет адаптива для различных экранов? Имхо rem также удобно как и в %.
Я сказал про адаптив в видео)
Всегда использую пиксели.
Красава, спасибо за видео.
Все это относительно шрифта, а если графика? Для "адаптации" под ширину экрана?
Там достаточно задать max width
а как насчёт vw , vh?
Про это в видео не было)
@@maxgraph а хотелось бы)
Может отдельно сделаю
Могу скинутт книгу где очень четко говорится для чего и когда используются ремы и емы
Зачем, и так все ясно)
Точно можешь?
@@AntonioBenderas тебе нет
em - бесполезная вещь... =))))))))))) берем кнопку и всем её внутренним элементам (иконкам, тексту и т.д.) задаем размеры в em. теперь добавляем к самой кнопке модификатор размера, к примеру .button--large { font-size: 1.2rem } или .button--small { font-size: .8rem } . мы используем rem для родителя для четкого указания размера, а em - дочерним, зависимым элементам для динамического изменения размера, в зависимости от модификаторов, применяемых к родителю. это самый простой, наглядный и используемый в реальных работах пример использования и взаимодействия em и rem =))
И в чем смысл?) в пикселях делается все то же самое, но проще.
@@maxgraph тупой ютуб режет все ссылки в комментариях - кодепен . ио /9poiiia/pen/JjmZqaX?editors=0100 это пример кода, а то ты явно не понимаешь о чем я выше написал. посмотри как делаются модификаторы в пикселях и в ремах.
Ну опять, для чего это? Разве есть дизайн-системы где относительные размеры нужны? Вряд ли
@@izzy7541 для чего - попробуй загуглить статьи, где подробно разжевано для чего. на том же css-tricks куча статей с подробным разбором и с примерами. читай-не-хочу.
Разве есть дизайн-системы где относительные размеры нужны? Вряд ли - хорошо, уговорил =) давай отменим все css фреймворки, включая bootstrap, uikit, materialize css и т.д. и т.п.
@@hjetwd я больше опираясь на практический опыт верстки дизайн систем. Зачем мне статьи про коня в вакууме? Не делают подобное в дизайн системах, так-как там вся типографика до миллиметра проработана. А как раз там и нужна вариативность
12:40 line-height в % не наследуется
Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.
То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
Значение, заданное в единицах измерения, запоминается и наследуется «как есть».
Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
Так это понятно)
препроцессор всё сам делает, какая разница. но просто кода больше в цсс получается) ну и в инспекторе хуже читается