3 причины не использовать блок px
Почему веб-разработчики так слепо используют модуль px? Это просто дурная привычка? Это из-за незнания других юнитов? Может быть, потому что команды разработчиков полагаются на px и pt в своих макетах? Непонятно, почему пиксель - это текущая единица измерения для большинства команд.
Возможно, главная причина в том, что это выглядит просто и удобно. Интуитивно мы думаем, что понимаем эту единицу, потому что похоже, что она отображает наш пиксельный экран.
Блок px - это то, с чего очень легко начать, но в дальнейшем это превращается в проблему. В этой статье я расскажу о трех основных причинах, по которым следует избегать использования пиксельного блока. Мы обсудим проблемы с его использованием и возможные решения.
1. Это просто оптические эталоны.
Значения пикселей больше не основаны на аппаратном пикселе. Это просто не будет работать и будет выглядеть по-разному для разных экранов и разрешений. Вместо этого они основаны на оптическом эталонном блоке. Так что той части, которую мы нашли более интуитивно понятной в этом модуле, больше нет.
Оборудование меняется с каждым днем, и плотность пикселей растет. Мы не можем полагаться на предположение, что устройства имеют плотность пикселей 96dpi. Они больше не являются стабильной точкой отсчета.
«Обратите внимание, что если единицей привязки является пиксельная единица, физические единицы могут не соответствовать своим физическим измерениям. В качестве альтернативы, если блок привязки является физическим блоком, блок пикселей может не отображаться на целое количество пикселей устройства.
Обратите внимание, что это определение пиксельной единицы и физических единиц отличается от предыдущих версий CSS. В частности, в предыдущих версиях CSS пиксельная единица и физические единицы не были связаны фиксированным соотношением: физические единицы всегда были привязаны к своим физическим измерениям, в то время как пиксельная единица изменялась, чтобы максимально соответствовать эталонному пикселю. (Это изменение было внесено, потому что слишком большая часть существующего контента полагается на предположение о 96 dpi, и нарушение этого предположения приводит к нарушению содержания.) »- W3C
Таким образом, это означает, что пиксель ненадежный. Из-за его ненадежности создание макетов с точностью до пикселя может оказаться невозможным.
Давайте посмотрим, как 1 мм соответствует пикселям с разным разрешением точек на дюйм:
Давно прошли те времена, когда на наших экранах можно было различать пиксели. Мы привыкли к этому ограничению, и от этой идеи нам нужно отказаться. Значение слова пиксель со временем утратило свое значение, и пора перестать делать его единицей измерения по умолчанию в нашем коде CSS.
2. Это абсолютные ценности.
Глядя на проблему выше, почему это происходит? Почему наш макет не может достичь пиксельного совершенства? Потому что единица пикселей - абсолютная. Это означает, что он не будет адаптироваться к соотношению пикселей, разрешению, размеру и т. Д. В нашем браузере.
Абсолютные значения обычно не очень полезны, если вы хотите удовлетворить широкую аудиторию. px единственная абсолютная единица? Нет, CSS поддерживает еще шесть абсолютных единиц. Найдите ссылку ниже:
Это означает, что если вы используете эти блоки, ваша аудитория будет иметь самые разные варианты макетов. Нецелесообразно тестировать свою страницу на предмет разрешения, в котором она может отображаться.
Как решить эту проблему? Как сделать наш макет адаптивным? Используя relative units. Что это вообще такое?
Единицы относительной длины относятся к чему-то еще, возможно, к размеру шрифта родительского элемента или размеру области просмотра. - MDN Web Docs
Давайте посмотрим на наиболее подходящие единицы, которые есть в нашем распоряжении:
Вы можете видеть, что список относительных единиц больше, чем абсолютный. Почему их так много?
У каждого из них есть определенные сценарии, в которых он больше подходит для использования. Наличие большого количества - отличная новость, поскольку мы знаем, что можем охватить множество различных вариантов использования. Вот почему так важно понимать каждую из них.
Допустим, мы хотим отобразить один столбец с максимум 20 символами в строке.
Чем сейчас занимается большинство разработчиков? Измерение средней длины символа по его шрифту / семейству / размеру и весу и умножение ее на 20.
Этот подход приводит к жестко запрограммированному значению пикселя. Это означает, что если размер шрифта изменится, вам придется снова выполнить расчет. Этот подход является приблизительным и не будет работать на всех устройствах одинаково.
Какое решение лучше? Используя блок ch. Вы можете основать целевую ширину столбца на кратной ch единице.
Давайте посмотрим на код, чтобы лучше понять, что:
Как вы можете видеть выше, мы ограничиваем max-width нашего content до 20ch.
#content {
...
max-width: 20ch;
}
Это всего лишь пример. Есть много замен для пиксельного блока. Иногда вам не нужна относительная единица. Вы можете использовать возможности flex и grid макетов для соответствующей корректировки макета. Не полагаясь на абсолютную единицу, ваши макеты сохранятся. Всегда предпочтительно полагаться на браузер, который сделает за нас всю тяжелую работу.
3. Доступность: они не адаптируются к размеру шрифта пользователя по умолчанию.
Доступность - это забытая тема, которой мы все должны уделять больше внимания. Как использование пикселей влияет на доступность?
Браузеры позволяют настроить базу по умолчанию font-size. По умолчанию установлено значение 16px, но его можно легко изменить. Это очень полезно для людей с нарушением зрения. Затем браузер дает нам подсказку о предпочтительном font-size пользователя, устанавливая базовый font-size на это значение.
Однако, если разработчики используют абсолютные значения пикселей, эта информация будет проигнорирована. База font-size не повлияет на макет нашего приложения. Размер шрифта будет одинаковым для всех пользователей. Это плохо, поскольку вы игнорируете предпочтения пользователей и ухудшаете доступность своей страницы.
Как мы можем соблюдать этот базовый размер шрифта? Используя относительные единицы, такие как rem и em. Что такое rem и em? Единицы rem и em выражают размер шрифта относительно базового шрифта для всего, от полей до текста. Проще говоря, это означает, что размер шрифта вашего текста будет кратным размеру шрифта, предпочитаемому пользователем. В чем разница между ними?
remвыразит это относительно корняfont-size.emбудет выражать это относительно размера элемента.
Вы не ограничены использованием этих единиц только в свойстве font-size. Их можно использовать где угодно в ваших элементах CSS. Это означает, что вы можете создать адаптивный макет на основе настроек пользователя. Вы можете обеспечить надлежащий опыт для своих пользователей.
Давайте посмотрим на пример, в котором мы будем адаптировать весь макет на основе базового размера шрифта пользователя. В этом конкретном примере мы будем полагаться на rem при разработке адаптивного макета:
Обратите внимание, что мы использовали rem для свойств padding, width и font-size.
Выше мы видим, как макет может адаптироваться к настройкам браузера пользователя. Шрифты больше, но статьи тоже. Они растут, чтобы сохранить пропорции. Несмотря на то, что они различаются по размеру для разных пользователей, они остаются неизменными по форме.
Бонусный совет
При работе с rem и rem единицами измерения может показаться обременительным выражать все для базового шрифта по умолчанию 16px. В этой ситуации есть очень популярный прием:
html {
font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}Используя этот трюк, теперь все размеры шрифтов будут основываться на коэффициенте 10px для базового шрифта по умолчанию 16px. Это сделает ваш код менее запутанным. Это не повредит доступности. Это просто сделает вашу жизнь немного проще.
Последние мысли
Мы увидели три веские причины, по которым мы должны отказаться от пиксельного блока. Использование относительных единиц или функций макета обеспечит единообразие макета для разных устройств и разрешений.
К счастью, использование относительных единиц, таких как rem и em, растет. Тем временем браузеры делают все возможное, чтобы предложить какие-то решения. При использовании абсолютных значений, если пользователи увеличивают масштаб, модуль браузера будет масштабироваться в соответствии с надлежащим масштабированием, применяемым пользователем. Не идеальный опыт, но достойный запасной вариант.
Я надеюсь, что эта статья дала вам последний толчок, чтобы держаться как можно дальше от пиксельного блока.
Вы не являетесь участником среднего уровня? Поддержи меня здесь, став им.
