От автора: если вы проектируете или разрабатываете веб-сайты, не используйте px. Абсолютные единицы (px, in, mm, cm, pt, и pc) не подходят как для доступности и адаптивного дизайна, так и при использовании таблиц для разметки. Из всех доступных абсолютных единиц, пиксели (px) являются единственными упорно не желающими уходить. Мы коллективно (и справедливо!) отказались от всех остальных единиц для стилизации цифрового контента.
Дизайнеры и разработчики могут видеть абсурдность измерений физических расстояний, которые применяются к цифровому контенту, но px просто кажутся … «цифровыми»? На самом деле, нет. Первоначально px был предназначен для отображения физического пикселя на экране устройства, наименьшей области, которую можно раскрасить. Они больше не привязаны к этому определению. Современные браузеры могут отображать пространства, измеряемые сотыми долями пикселя.
Почему пиксели не очень хороши для доступности?
Пользователи приходят на ваш сайт за контентом, поэтому он должен быть читабельным. Значит, он должен быть… по крайней мере 12px? Может быть 16px? По правде говоря, это зависит от обстоятельств. Это не зависит от вашего контента, это зависит от пользователя. Они могут настроить свою операционную систему или браузер, чтобы установить предпочтительный размер шрифта, соответствующий их потребностям. Установив больший размер шрифта, они теперь могут просматривать списки контактов и электронные письма, и им ненужно прищуриваться. Если ваш сайт создан с использованием размера шрифта в px, они все равно будут щуриться, потому что пиксели не масштабируются, когда браузер изменяет корневой размер шрифта. (Это не совсем так — Safari игнорирует измерения пикселей и в любом случае масштабирует шрифт.)
Уважайте потребности и предпочтения пользователей, создавая размеры шрифтов с помощью единицы rem. Эти измерения будут хорошо масштабироваться. Для плавной типографики включайте единицы rem при расчетах.
Почему пиксели плохи для адаптивного дизайна?
Адаптивный дизайн — это реакция на две вещи: устройства и контент. Для макета, который зависит от размера экрана, мы больше не можем предполагать, что мобильные устройства 320px широкие или что 1024px это полная ширина экрана. У нас есть относительные единицы (vh, vw, vmax и vmin), чтобы правильно реагировать на размеры экрана, независимо от их физических размеров.
Для макета, зависящего от содержимого, например, наличия пространства вокруг метки кнопки, единицы px выглядят подходящими, только если текст имеет определенный размер. Измените размер шрифта, и вам придется заново отредактировать отступы, поля, ширину столбца или что-то еще, чтобы приспособить новый размер шрифта.
Изменение размера шрифта, созданного с помощью относительных единиц (em, ch, ex, и rem), автоматически изменяет интервал. Это удобно для гибких дизайнов, сохраняя реальный вид текста, соответствующий размеру текста, а также это помогает сохранить макеты, когда пользователь изменяет предпочтения размера шрифта на гораздо большее число.
Но что насчет..?
Картинок? Разве мы не должны указывать их размеры в пикселях, как посоветовала Джен Симмонс? Да, но вы указываете это в HTML, а не в CSS. При стилизации элемента img или video используйте относительные единицы и aspect-ratio.
Ограничений размеров шрифта? Можно писать font-size: clamp(12px, 10vw, 22px)? Нет. Это игнорирует предпочтения пользователя двумя способами. Во-первых, использование vw единиц для размера шрифта не масштабируется в соответствии с предпочтениями пользователя. Во-вторых, что, если у пользователя установлен базовый размер шрифта больше чем 22px? Это игнорируется. Вместо этого, включать шрифт относительных единиц в каждом аргументе: font-size: clamp(0.75rem, 0.5rem + 8vw, 1.375rem).
Медиа-запросы? Зелл Лью ответил на этот вопрос в медиа-запросах PX, EM или REM? еще в 2016 году. TLDR: использует em, не использует rem или px для единообразной работы в браузерах и хорошо реагирует на изменения масштабирования текста.
Тонкие линии и небольшой интервал? Обычно тонкая линия границы делается шириной 1px. Браузеры по-прежнему будут отображать очень маленькие rem измерения 1px, так что вам не нужно беспокоиться о том, что ваша тонкая граница исчезнет, когда вы конвертируете ее из 1px в 0.0625rem. (Экспериментально Firefox округляет любое измерение от 0.001или до 1⁻³, а браузеры Webkit гораздо больше 0.000000000000000000000000000000000000000000000000000000001 rem округляют, или до 1⁻56 .) Отступы (например, padding и margin) не округляются до целых пикселей и могут быть очень маленькими. Если крайне необходимо, чтобы пространство было хотя бы 1px, то рекомендую использовать max(1px, really_small_relative_unit).
А теперь крылатая фраза …
Каждой кампании нужен броский слоган, поэтому мое стремление избавить Интернет от пикселей нужно наклеить на бампер. Вот некоторые из них, о которых я подумал:
Абсолютные единицы — это абсолютный мусор!
Просто скажи нет пикселям!
Никаких абсолютных единиц!
Относительный дизайн лучше!
Автор: Nick Gard
Источник: uxdesign.cc
Редакция: Команда webformyself.