Единицы измерения CSS. Px, em или rem - что использовать?

Привет! В этом видео расскажу о px, em и rem - что это, и в каких случаях стоит использовать.
00:00 - Интро
00:24 - Про пиксели
02:16 - Про em
04:48 - Про rem
07:08 - px или rem
11:54 - Выводы
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Поддержать канал: boosty.to/maxgraph
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: t.me/maxgraph
Чат для верстальщиков: t.me/maxgraph_chat
Для заказа верстки обращайтесь в телеграм @maxdenaro
#обучение #css #emrempx

[@yurkaronin]

Последовательное и наглядное пояснение особенностей единиц измерения. Очень полезно, особенно новичкам. Спасибо автору. За 9 лет разработки, часто приходится работать с легаси кодом (чужим кодом, чужой вёрсткой) и от ремов и емов больше проблем, чем пользы. Как по мне - чем понятней - тем проще, что бы любой спец мог после тебя разобраться в том, как вычисляются размеры шрифтов и внести доработки. Это важнейший приоритет. И по поводу дизайна согласен. с приходов гридов и флексов стандартизация сеток, ритмов и типографики на столько разная, что чёрт ногу сломит. Что бы не усложнять еще больше не усложнять коллегам рабочий процесс - лучше использовать простые и универсальные единицы - пиксели.

[@kenobi6027]

А вы даже через 9 лет работы смотрите такие видосы?

[@yurkaronin]

@@kenobi6027 да. даже в тех тема, которые тебе хорошо знакомы бывает что то полезное. Иногда даже что то новое узнаёшь. Конкретно тут орошая подача материала и поэтому я лайкнул и прокомментировал.

[@kenobi6027]

Спасибо: в итоге видишь и мнение автора и комменты, которые не согласны, и для себя выбираешь золотую середину. Каждвй найдет под себя)

[@user-xb5cu7ur5y]

Классная тема! Объяснил очень хорошо! Супер!

[@orazaliorazali1000]

Благодарю!

[@lev.bortov]

На счёт em-ов категорически не согласен. По сути, em - это динамически изменяемая единица, которая работает по формуле N * em. Она отлично подходит для ситуация, когда важно в динамике сохранить пропорции элемента, например в анимациях. Предположим, перед нами стоит задача: сделать, как бы, выплывающую из далека кнопку; у кнопки есть лейбл и лид-иконка, если мы хотим, чтобы кнопка «выплывала» из далека - все её составляющие должны пропорционально изменяться. Скажем, что расстояние между иконкой и лейблом в финальном положении должно составлять 8px, fontSize лейбла 16px, а размер иконки должен соответствовать размеру лейбла. В таком случае, мы можем указать расстояние между иконкой и лейблом как 0,5em, а размер иконки 1em. Таким нехитрым образом получим кнопку, которую можно как угодно увеличивать, уменьшать, а её пропорции останутся неизменными. em-ы нужны не для того, чтобы на них всю страницу целиком верстать, а для того, чтобы реже использовать calc() в таких вот ситуациях.

[@maxgraph]

Анимации с изменением размеров делаются через трансформ, так что не очень понимаю в чем поинт) Я бы использовал em только для letter spacing, в остальном не вижу пользы

[@BMikel]

Как всегда подача материала навысоте. Лайк в поддержку канала! Максим, ты - лучший. Продолжай нас радовать качественным контентом

[@maxgraph]

Спасибо)

[@dukecca]

Поддерживаю! Проценты легко настраиваются прямо на странице и легко рассчитываются calc()

[@alexperemey6046]

По поводу rem я наоборот согласен. Прочел статью, что надо использовать rem, чтобы пользователь мог менять только шрифт, начал использовать через sass скрипт, потом подумал, что в каждом первом макете, кроме макета в стиле "просто полотно текста", при таких действиях пользователя весь тщательно вылизанный дизайн ломается, в результате чего смысла в таких "удобствах" вообще никакого, вред один. Засомневался, полез искать дополнительных разъяснений. Ну и вот, услышал свои мысли.

[@carbon00938]

Привет, классное видео, спасибо. Но я вот приверженец все таки конечно пикселей, но недавно столкнулся с требованием чтобы все было в ремах. И тут получилось так что при адаптиве я использовал calc и получилось так что при ресейзе, весь проект пропорционально уменьшается, до мобилки, потом снова включается такая штука как font-size: 10px и уже в мобилке все размеры сделаны по макету (шрифты и размеры меньше). И тут у меня такой диссонанс получился, что можно очень легко сделать адаптив с помощью ремов )) Можете, пожалуйста такой вариант применения ремов рассмотреть? П.с. В компании которой начинал работать (веб студия) при сборке проекта на Galp в итоге получалось все на ремах и емах.

[@bless_meparde4913]

Полностью согласен. Используйте пиксели и не заморачивайтесь. Исключение разве что скейлинг (масштабирование на супер широких экранах > 1920px ) - вот при нем понадобятся ремы

[@AntonioBenderas]

> 1920 px это уже не суперширокие, это обыденность

[@alexperemey6046]

Ctrl + же. А еще у меня уже много лет в винде стоит общее масштабирование шрифта в системе 125%. И мне тоже никакие ремы не нужны.

[@agag5083]

Полезное видео. У одного разработчика видел спец js функцию adaptiveValue где можно поставить максимальный и минимальный размер шрифта в размере экрана. Очень удобно использовать для адаптива марджинов и падингов. А так же помогает с размером шрифтов.

[@hjetwd]

это делается с помощью 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 можно легко сделать, имея правильную формулу расчета).

[@hjetwd]

@@user-qr7zu5ty7i согласен =) для старых браузеров - годная вещь

[@gio2156]

про rem согласен, em все таки бывают полезны, например для паддингов в кнопках, маргинов между текстами, текстовых инпутов, в общем для любых компонентов у которых отступы можно привязать к размеру шрифта, так при изменении шрифта пропорционально изменятся отступы, минус что постоянно с калькулятором нужно вычислять значения

[@maxgraph]

В целом удобно, но не то чтобы сильно нужно

[@AntonioBenderas]

4:25 для заголовков, параграфов margin-bottom в еm

[@maxgraph]

Зачем?

[@AntonioBenderas]

@@maxgraph чтобы в мениазапросах меньше правил писать, только размер шрифта, а отступы автоматически поменяются. Но опять же, зависит от макета, может придётся поправлять, тогда пиксели )

[@mit7871]

Хорош, это может быть очень полезно

[@lwickboxl]

а как на счет clamp для "резинового" шрифта? Хорошая практика?

[@maxgraph]

Я считаю что плохая. Шрифт должен зависеть либо от базовой единицы, либо от масштаба сайта

[@virtuoz-ru]

Всегда использую пиксели. Красава, спасибо за видео.

[@souleater4413]

Начал учить верстку , не понял этих рем мем хее...м . Зачем они, если можно просто медиа запрос сделать

[@user-eh7no3me3x]

а как насчёт vw , vh?

[@maxgraph]

Про это в видео не было)

[@user-eh7no3me3x]

@@maxgraph а хотелось бы)

[@maxgraph]

Может отдельно сделаю

[@powered8473]

А как насчет адаптива для различных экранов? Имхо rem также удобно как и в %.

[@maxgraph]

Я сказал про адаптив в видео)

[@Виктор_Крылов]

Все это относительно шрифта, а если графика? Для "адаптации" под ширину экрана?

[@maxgraph]

Там достаточно задать max width

[@vipdeveloper]

Могу скинутт книгу где очень четко говорится для чего и когда используются ремы и емы

[@maxgraph]

Зачем, и так все ясно)

[@AntonioBenderas]

Точно можешь?

[@vipdeveloper]

@@AntonioBenderas тебе нет

[@hjetwd]

em - бесполезная вещь... =))))))))))) берем кнопку и всем её внутренним элементам (иконкам, тексту и т.д.) задаем размеры в em. теперь добавляем к самой кнопке модификатор размера, к примеру .button--large { font-size: 1.2rem } или .button--small { font-size: .8rem } . мы используем rem для родителя для четкого указания размера, а em - дочерним, зависимым элементам для динамического изменения размера, в зависимости от модификаторов, применяемых к родителю. это самый простой, наглядный и используемый в реальных работах пример использования и взаимодействия em и rem =))

[@maxgraph]

И в чем смысл?) в пикселях делается все то же самое, но проще.

[@hjetwd]

@@maxgraph тупой ютуб режет все ссылки в комментариях - кодепен . ио /9poiiia/pen/JjmZqaX?editors=0100 это пример кода, а то ты явно не понимаешь о чем я выше написал. посмотри как делаются модификаторы в пикселях и в ремах.

[@izzy7541]

Ну опять, для чего это? Разве есть дизайн-системы где относительные размеры нужны? Вряд ли

[@hjetwd]

@@izzy7541 для чего - попробуй загуглить статьи, где подробно разжевано для чего. на том же css-tricks куча статей с подробным разбором и с примерами. читай-не-хочу. Разве есть дизайн-системы где относительные размеры нужны? Вряд ли - хорошо, уговорил =) давай отменим все css фреймворки, включая bootstrap, uikit, materialize css и т.д. и т.п.

[@izzy7541]

@@hjetwd я больше опираясь на практический опыт верстки дизайн систем. Зачем мне статьи про коня в вакууме? Не делают подобное в дизайн системах, так-как там вся типографика до миллиметра проработана. А как раз там и нужна вариативность

[@AntonioBenderas]

12:40 line-height в % не наследуется

[@AntonioBenderas]

Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт. Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

[@maxgraph]

Так это понятно)

[@user-nv5ec9ch8q]

препроцессор всё сам делает, какая разница. но просто кода больше в цсс получается) ну и в инспекторе хуже читается