Все единицы измеренеия являются взаимозаменяемыми. Фактически, вы можете даже смешивать их в вызовах calc (), и это будет работать правильно (многие CSS-фреймворки делают это для правильного учета заполнения и границ при вычислении размеров).
Описание каждого
- Следует избегать дюймов, точек (1/72 дюйма или примерно 0,353 мм), миллиметров и сантиметров, если только вам не нужно (попробовать) и получить изображение «реального размера» или должным образом масштабированное изображение. В CSS они вычисляются из числа пикселей на основе размера пикселя дисплея. Проблема заключается в том, что это ненадежно, за исключением печатных носителей (принтеры почти всегда знают свой точечный шаг), поскольку современные дисплеи могут иметь разные размеры пикселей по горизонтальной и вертикальной оси, и многие дисплеи отображают относительно их DPI / DPM.
- PX, Пиксели следует использовать только тогда, когда вам нужны очень тонкие линии (например, границы) или вы пытаетесь установить точный размер изображения, чтобы предотвратить его масштабирование (хотя второй случай не работает надежно и должен использовать один из следующих вариантов: другие физические единицы вместо этого при работе с печатными носителями (1px в печатных носителях для большинства реализаций CSS равен 1pt). Они не адаптивны, не согласованы и иногда мешают функционированию масштабирования.
- VW, VH Единицы видового экрана следует экономно использовать для таких вещей, как наложения, которые необходимо масштабировать только в зависимости от размера дисплея. Даже в этом случае их сложно сделать правильно и могут вызвать проблемы (если их использовать неправильно, они вызовут проблемы при уровнях масштабирования не по умолчанию). У них также есть несколько странных причуд, которые варьируются от браузера к браузеру (например, все, кроме Firefox неправильно реализует 100vw (они включают ширину полосы прокрутки, но не должны). Вы почти никогда не захотите использовать их для таких вещей, как размеры шрифтов, поскольку они могут демонстрировать некоторые действительно неожиданные действия для пользователей (представьте, что размер шрифта меняется, когда пользователь изменяет размер окна браузера или переключается в полноэкранный режим или из него).
- % следует использовать, когда необходимо масштабировать свойство на основе значения того же свойства в родительском элементе (или того, какое значение для этого свойства вычислено для родительского элемента). Например, управление размером боковых панелей в тексте или помощь в настройке определенного количества элементов по умолчанию на строку / столбец в макете flexbox. Проценты технически работают для размеров шрифта, но я бы рекомендовал избегать их использования для этого, так как EM и REM работают так же хорошо и ведут себя немного более логично для большинства людей.
- EM следует использовать, когда вам нужно масштабировать свойство вне размера шрифта элемента (или размера шрифта его родителя, если вы используете их для установки размера шрифта элемента). Обычно это просто используется для настройки размера шрифта небольших разделов текста. Примером использования могут быть страницы, которые есть на некоторых сайтах с большим списком тегов, с размером текста каждого тега в зависимости от его популярности. Многие такие сайты используют один элемент <span> для каждого тега и изменяют размер шрифта, используя единицы EM.
- REM следует использовать почти для всего остального. Они работают как EM-модули, но масштабируются от размера шрифта корневого элемента документа (так, в большинстве случаев, элемента <html> или <body>), что означает, что они согласованы независимо от того, где они используются в иерархия (IOW, 1rem всегда имеет одинаковый размер, независимо от того, где он отображается в иерархии), и, как следствие, большинству людей легче рассуждать.
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
Показать комментарии
