Последовательное и наглядное пояснение особенностей единиц измерения. Очень полезно, особенно новичкам. Спасибо автору. За 9 лет разработки, часто приходится работать с легаси кодом (чужим кодом, чужой вёрсткой) и от ремов и емов больше проблем, чем пользы. Как по мне - чем понятней - тем проще, что бы любой спец мог после тебя разобраться в том, как вычисляются размеры шрифтов и внести доработки. Это важнейший приоритет. И по поводу дизайна согласен. с приходов гридов и флексов стандартизация сеток, ритмов и типографики на столько разная, что чёрт ногу сломит. Что бы не усложнять еще больше не усложнять коллегам рабочий процесс - лучше использовать простые и универсальные единицы - пиксели.
@@kenobi6027 да. даже в тех тема, которые тебе хорошо знакомы бывает что то полезное. Иногда даже что то новое узнаёшь. Конкретно тут орошая подача материала и поэтому я лайкнул и прокомментировал.
На счёт em-ов категорически не согласен. По сути, em - это динамически изменяемая единица, которая работает по формуле N * em. Она отлично подходит для ситуация, когда важно в динамике сохранить пропорции элемента, например в анимациях. Предположим, перед нами стоит задача: сделать, как бы, выплывающую из далека кнопку; у кнопки есть лейбл и лид-иконка, если мы хотим, чтобы кнопка «выплывала» из далека - все её составляющие должны пропорционально изменяться. Скажем, что расстояние между иконкой и лейблом в финальном положении должно составлять 8px, fontSize лейбла 16px, а размер иконки должен соответствовать размеру лейбла. В таком случае, мы можем указать расстояние между иконкой и лейблом как 0,5em, а размер иконки 1em. Таким нехитрым образом получим кнопку, которую можно как угодно увеличивать, уменьшать, а её пропорции останутся неизменными. em-ы нужны не для того, чтобы на них всю страницу целиком верстать, а для того, чтобы реже использовать calc() в таких вот ситуациях.
Анимации с изменением размеров делаются через трансформ, так что не очень понимаю в чем поинт) Я бы использовал em только для letter spacing, в остальном не вижу пользы
По поводу rem я наоборот согласен. Прочел статью, что надо использовать rem, чтобы пользователь мог менять только шрифт, начал использовать через sass скрипт, потом подумал, что в каждом первом макете, кроме макета в стиле "просто полотно текста", при таких действиях пользователя весь тщательно вылизанный дизайн ломается, в результате чего смысла в таких "удобствах" вообще никакого, вред один. Засомневался, полез искать дополнительных разъяснений. Ну и вот, услышал свои мысли.
про rem согласен, em все таки бывают полезны, например для паддингов в кнопках, маргинов между текстами, текстовых инпутов, в общем для любых компонентов у которых отступы можно привязать к размеру шрифта, так при изменении шрифта пропорционально изменятся отступы, минус что постоянно с калькулятором нужно вычислять значения
Привет, классное видео, спасибо. Но я вот приверженец все таки конечно пикселей, но недавно столкнулся с требованием чтобы все было в ремах. И тут получилось так что при адаптиве я использовал calc и получилось так что при ресейзе, весь проект пропорционально уменьшается, до мобилки, потом снова включается такая штука как font-size: 10px и уже в мобилке все размеры сделаны по макету (шрифты и размеры меньше). И тут у меня такой диссонанс получился, что можно очень легко сделать адаптив с помощью ремов )) Можете, пожалуйста такой вариант применения ремов рассмотреть? П.с. В компании которой начинал работать (веб студия) при сборке проекта на Galp в итоге получалось все на ремах и емах.
Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт. Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
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 я больше опираясь на практический опыт верстки дизайн систем. Зачем мне статьи про коня в вакууме? Не делают подобное в дизайн системах, так-как там вся типографика до миллиметра проработана. А как раз там и нужна вариативность
Полностью согласен. Используйте пиксели и не заморачивайтесь. Исключение разве что скейлинг (масштабирование на супер широких экранах > 1920px ) - вот при нем понадобятся ремы
Полезное видео. У одного разработчика видел спец 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 чтобы в мениазапросах меньше правил писать, только размер шрифта, а отступы автоматически поменяются. Но опять же, зависит от макета, может придётся поправлять, тогда пиксели )
Последовательное и наглядное пояснение особенностей единиц измерения. Очень полезно, особенно новичкам. Спасибо автору.
За 9 лет разработки, часто приходится работать с легаси кодом (чужим кодом, чужой вёрсткой) и от ремов и емов больше проблем, чем пользы.
Как по мне - чем понятней - тем проще, что бы любой спец мог после тебя разобраться в том, как вычисляются размеры шрифтов и внести доработки. Это важнейший приоритет.
И по поводу дизайна согласен. с приходов гридов и флексов стандартизация сеток, ритмов и типографики на столько разная, что чёрт ногу сломит. Что бы не усложнять еще больше не усложнять коллегам рабочий процесс - лучше использовать простые и универсальные единицы - пиксели.
А вы даже через 9 лет работы смотрите такие видосы?
@@kenobi6027 да. даже в тех тема, которые тебе хорошо знакомы бывает что то полезное. Иногда даже что то новое узнаёшь. Конкретно тут орошая подача материала и поэтому я лайкнул и прокомментировал.
Спасибо: в итоге видишь и мнение автора и комменты, которые не согласны, и для себя выбираешь золотую середину. Каждвй найдет под себя)
На счёт em-ов категорически не согласен. По сути, em - это динамически изменяемая единица, которая работает по формуле N * em. Она отлично подходит для ситуация, когда важно в динамике сохранить пропорции элемента, например в анимациях.
Предположим, перед нами стоит задача: сделать, как бы, выплывающую из далека кнопку; у кнопки есть лейбл и лид-иконка, если мы хотим, чтобы кнопка «выплывала» из далека - все её составляющие должны пропорционально изменяться. Скажем, что расстояние между иконкой и лейблом в финальном положении должно составлять 8px, fontSize лейбла 16px, а размер иконки должен соответствовать размеру лейбла. В таком случае, мы можем указать расстояние между иконкой и лейблом как 0,5em, а размер иконки 1em. Таким нехитрым образом получим кнопку, которую можно как угодно увеличивать, уменьшать, а её пропорции останутся неизменными.
em-ы нужны не для того, чтобы на них всю страницу целиком верстать, а для того, чтобы реже использовать calc() в таких вот ситуациях.
Анимации с изменением размеров делаются через трансформ, так что не очень понимаю в чем поинт)
Я бы использовал em только для letter spacing, в остальном не вижу пользы
Как всегда подача материала навысоте. Лайк в поддержку канала! Максим, ты - лучший. Продолжай нас радовать качественным контентом
Спасибо)
По поводу rem я наоборот согласен. Прочел статью, что надо использовать rem, чтобы пользователь мог менять только шрифт, начал использовать через sass скрипт, потом подумал, что в каждом первом макете, кроме макета в стиле "просто полотно текста", при таких действиях пользователя весь тщательно вылизанный дизайн ломается, в результате чего смысла в таких "удобствах" вообще никакого, вред один.
Засомневался, полез искать дополнительных разъяснений. Ну и вот, услышал свои мысли.
про rem согласен, em все таки бывают полезны, например для паддингов в кнопках, маргинов между текстами, текстовых инпутов, в общем для любых компонентов у которых отступы можно привязать к размеру шрифта, так при изменении шрифта пропорционально изменятся отступы, минус что постоянно с калькулятором нужно вычислять значения
В целом удобно, но не то чтобы сильно нужно
Благодарю!
Привет, классное видео, спасибо. Но я вот приверженец все таки конечно пикселей, но недавно столкнулся с требованием чтобы все было в ремах. И тут получилось так что при адаптиве я использовал calc и получилось так что при ресейзе, весь проект пропорционально уменьшается, до мобилки, потом снова включается такая штука как font-size: 10px и уже в мобилке все размеры сделаны по макету (шрифты и размеры меньше). И тут у меня такой диссонанс получился, что можно очень легко сделать адаптив с помощью ремов )) Можете, пожалуйста такой вариант применения ремов рассмотреть? П.с. В компании которой начинал работать (веб студия) при сборке проекта на Galp в итоге получалось все на ремах и емах.
Начал учить верстку , не понял этих рем мем хее...м . Зачем они, если можно просто медиа запрос сделать
Все это относительно шрифта, а если графика? Для "адаптации" под ширину экрана?
Там достаточно задать max width
Всегда использую пиксели.
Красава, спасибо за видео.
а как насчёт vw , vh?
Про это в видео не было)
@@maxgraph а хотелось бы)
Может отдельно сделаю
12:40 line-height в % не наследуется
Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.
То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
Значение, заданное в единицах измерения, запоминается и наследуется «как есть».
Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
Так это понятно)
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 я больше опираясь на практический опыт верстки дизайн систем. Зачем мне статьи про коня в вакууме? Не делают подобное в дизайн системах, так-как там вся типографика до миллиметра проработана. А как раз там и нужна вариативность
Классная тема! Объяснил очень хорошо! Супер!
Полностью согласен. Используйте пиксели и не заморачивайтесь. Исключение разве что скейлинг (масштабирование на супер широких экранах > 1920px ) - вот при нем понадобятся ремы
> 1920 px это уже не суперширокие, это обыденность
Ctrl + же. А еще у меня уже много лет в винде стоит общее масштабирование шрифта в системе 125%. И мне тоже никакие ремы не нужны.
Поддерживаю! Проценты легко настраиваются прямо на странице и легко рассчитываются calc()
Могу скинутт книгу где очень четко говорится для чего и когда используются ремы и емы
Зачем, и так все ясно)
Точно можешь?
@@AntonioBenderas тебе нет
Полезное видео. У одного разработчика видел спец 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 также удобно как и в %.
Я сказал про адаптив в видео)
препроцессор всё сам делает, какая разница. но просто кода больше в цсс получается) ну и в инспекторе хуже читается