Em px: Конвертер пикселей в EM

Содержание

Пришло время попрощаться с единицей измерения px / Хабр

Если вы занимаетесь дизайном сайтов или их разработкой — не используйте абсолютные единицы измерения. А именно — px, in, mm, cm, pt и pc. Это, в дизайне, так же плохо в плане доступности и отзывчивости контента, как использование таблиц в сфере создания макетов страниц. Если взглянуть на все абсолютные единицы измерения, то окажется, что лишь px упрямо не желает нас покидать. Коллективный разум веб-дизайнеров (что правильно!) отказался от применения всех остальных подобных единиц измерения в деле стилизации материалов веб-страниц.

Дизайнеры и разработчики способны осознать абсурдность применения физических единиц измерения расстояний для стилизации цифрового контента, а вот пиксели… похоже, они кажутся всем достаточно «цифровыми». Но они таковыми не являются. Изначально единица измерения px была предназначена для представления физических пикселей на экранах устройств, то есть — для описания наименьших фрагментов изображений, которые можно окрасить в некий цвет. Они больше не привязаны к этому определению. Взгляните на этот материал о пикселях, написанный ещё в 2010 году. Современные браузеры могут рендерить элементы, измеряемые в сотых долях пикселя.

Почему использование единицы измерения px плохо сказывается на доступности контента?

Пользователи приходят на сайты ради материалов этих сайтов. Поэтому материалы должны быть пригодными для чтения. А это значит, что размеры шрифта должны быть… как минимум 12px? Или, может, 16px? На самом деле, смотреть надо по ситуации. И зависит это не от самих материалов, а от пользователя. Пользователи могут настраивать свои операционные системы или браузеры, устанавливая предпочитаемый ими размер шрифта, соответствующий их нуждам. Если им это нужно, то, настроив применение шрифта, размер которого крупнее стандартного, они могут спокойно, не приглядываясь, просматривать списки контактов и читать электронные письма. Если сайт создан с использованием размеров шрифтов, выраженных в единицах измерения px, то таким пользователям, для которых эти шрифты слишком мелки, даже если они и настроили удобный для себя размер шрифта, будет неудобно читать материалы сайта.

Дело в том, что размеры, выраженные в пикселях, не масштабируются даже в том случае, когда браузер меняет размер шрифта корневого элемента. (Это утверждение, правда, нельзя назвать полностью правильным — Safari игнорирует размеры, выраженные в пикселях, и всё равно масштабирует шрифты.)

Уважайте нужды своих пользователей и выполняемые ими настройки их рабочей среды, настраивая размеры шрифтов с использованием единицы измерения rem. Такие шрифты хорошо масштабируются. Для организации плавного изменения размеров шрифтов (fluid typography) используйте в расчётах единицу измерения rem.

Почему использование px — это плохо для отзывчивого веб-дизайна?

Страница, при создании которой используется подход, известный как «отзывчивый дизайн», должна подстраиваться под устройства, на которых выводят эту страницу, и под содержимое, которое выводят на странице. Если макет зависит от размера экрана, то в современных условиях уже нельзя рассчитывать на то, что экран мобильных устройств имеет

320px в ширину, или что полная ширина экрана настольного компьютера равна 1024px.

В нашем распоряжении имеются единицы измерения, связанные с областью просмотра страницы (vh, vw, vmax и vmin), использование которых позволяет настроить правильную подстройку страниц под экраны разных размеров, не зависящую от их физических параметров.

Если макет зависит от содержимого страницы, например, когда вокруг надписи на кнопке нужно предусмотреть некое пустое пространство, то единицы измерения px позволяют достичь приемлемого результата лишь в том случае, когда текст надписи имеет определённый размер. Изменение размеров шрифта приведёт к тому, что, для придания странице нужного вида, придётся перенастраивать внутренние или внешние отступы, или ширину столбцов, или что угодно другое. А если при настройке параметров элемента макета использованы единицы измерения, ориентированные на размер шрифта (

em, ch, ex и rem), то изменение свойства font-size приведёт к автоматическому изменению параметров макета.

Этими возможностями удобно пользоваться при создании гибких дизайнов, это помогает поддерживать размер свободного пространства вокруг текста на правильном уровне. Это, кроме того, позволяет странице хорошо выглядеть даже тогда, когда пользователь устанавливает гораздо более крупный размер шрифта, чем тот, что изначально использовался на странице.

А как насчёт…

▍изображений?

Не должны ли мы, по совету Джен Симмонс, указывать размеры изображений в пикселях? Да, должны, но в HTML, а не в CSS. При стилизации элементов

img или video нужно, для поддержания их в отзывчивом состоянии, использовать относительные единицы измерения и свойство aspect-ratio.

▍размеров шрифтов, заданных с помощью функции clamp()?

Нормально ли выглядит такая конструкция: font-size: clamp(12px, 10vw, 22px)? Нет, не нормально. Тут предпочтения пользователя игнорируются дважды. Во-первых — здесь, для указания размера, применяются единицы измерения vw, которые не масштабируются в соответствии с настройками, задаваемыми пользователем. Во-вторых — что произойдёт, если пользователь задаст размер базового шрифта, превышающий 22px? Эта настройка будет проигнорирована. Вместо этого в каждый аргумент функции clamp() стоит включить единицы измерения, опирающиеся на параметры шрифта: font-size: clamp(0.75rem, 0.5rem + 8vw, 1.375rem)

▍медиазапросов?

Об использовании единиц измерения px, em и rem в медиазапросах писали ещё в 2016 году. Если кратко передать смысл той публикации, то окажется, что для того чтобы страница хорошо выглядела бы в разных браузерах и правильно реагировала бы на изменения, предусматривающие изменение размеров текста, нужно использовать единицу измерения em, а не rem или px.

▍тонких линий и маленьких отступов?

Обычно границы между объектами, оформляемые с помощью линии наименьшей толщины, делают, в ширину, равными 1px. Браузеры, кроме того, выводят элементы, размеры которых выражены в очень маленьких значениях rem, как имеющие размеры 1px

. Поэтому можно не беспокоиться о том, что тончайшая граница просто исчезнет в том случае, если при настройке её ширины использовать не 1px, а 0.0625rem. (Экспериментально выяснено, что Firefox округляет любые размеры, начиная с 0.001, или 1⁻³. А Webkit-браузеры в этом плане проявляют гораздо большую щедрость, округляя значения в 0.000000000000000000000000000000000000000000000000000000001rem или 1⁻⁵⁶.) Размеры отступов (вроде padding и margin) не округляются до целых пикселей, они могут быть очень маленькими. Если важно, чтобы размер некоего отступа равнялся бы как минимум 1px, тогда я порекомендовал бы использовать конструкцию вида max(1px, really_small_relative_unit).

Подумаем о продвижении моей идеи

Каждая кампания нуждается в броском слогане. Поэтому моё стремление к избавлению веб-дизайна от абсолютных единиц измерения нужно поддержать чем-то вроде наклейки на бампер или футболки с надписью. Вот несколько вариантов:

Абсолютные единицы измерения — это абсолютный хлам! (Absolute units are absolute trash!)
Просто скажем нет пикселям! (Just say no to pixels!)
Абсолютно никаких абсолютных единиц измерения! (Absolutely no absolute units!)
Чем относительнее дизайн — тем лучше! (Design is better relatively!)

Я пока что не заказывал футболки, поэтому если у вас возникнет идея более удачного слогана — дайте мне знать.

Как вы относитесь к использованию абсолютных единиц измерения в веб-дизайне?

Единицы измерения в CSS.EM, EX, PX, %, IN, CM, MM, pt, pc -Будни программиста

В CSS есть несколько основных единиц измерения это относительные и абсолютные. При работе с CSS следует точно разобраться с их применением иначе работа с каскадными таблицами стилей будет сложна и непонятна. Абсолютные единицы измерения делятся на 5 типов, относительные на 4. Следует знать что Абсолютные единицы измерения не зависят от устройства вывода, т.е. мониторов и экранов, относительные же определяют размер элемента относительна другого размера т.е. монитора, экрана, родительского элемента и т.д.Теперь подробнее о них.

Относительные единицы измерения.

Относительные единицы измерения обычно используют для работы с текстом и в «расширяемых» верстках. В следующей таблице приведены основные относительные единицы измерения.

Единица	Описание
em	Высота текущего элемента
ex	Высота символа х
px	Пиксел
%	Процент

EM

Измеряемое значение зависит от размера шрифта текущего элемента (он устанавливается через атрибут font-size). Когда он явно не задан используется размер текста который заложен в браузере. Поэтому 1em изначально равен размеру шрифта заложенному в браузере по умолчанию.

EX

Этот аргумент определяется как высота символа «х» в нижнем регистре. Ex привязан к размеру шрифта заданного в браузере по умолчанию, если у родительского элемента задан атрибут «font-size» то он привязан к нему.

PX

Пиксель это 1 точка разрешения устройства вывода (монитора или экрана). Т.е. Если у вас разрешение монитора 1024*768 то вы имеете 1024 пикселя по горизонтали и 768 пикселей по вертикале. Т.е. размер пикселя напрямую зависит от разрешения устройства вывода и его технических характреристик.

%

Процентная единицы измерения зависит от размеров родительского элемента.

Абсолютные единицы измерения.

Абсолютные единицы измерения применяются не так часто и в большинстве своем при работе с текстом. В следующий таблицы приведены Абсолютные единицы измерения.

Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Из данных единиц следует описать только pt (пункт), т. к. pc это производное от pt а использование in, cm и mm описывать не нужно.

Пункт является самой распространенной и повсеместно используемой единицей измерения шрифтов (помните как выставляли размер шрифта в том же ворде или опен офисе?).

На этом все, удачи 😉

Теги: %, cm, CSS, em, ex, font-size, in, mm, pc, pt, px

Конвертер

EM в PX

Конвертер EM в PX — это бесплатный онлайн-инструмент, который вы можете использовать для преобразования em в пиксели (px). Таким образом, вам не нужно самостоятельно выполнять преобразование вручную, и вы можете больше сосредоточиться на том, что вы делаете.

Как использовать конвертер EM в PX

Шаг 1: Введите базовое значение. Это значение размера шрифта родительского элемента.
Шаг 2: Введите значение em, которое вы хотите преобразовать.
Шаг 3: Нажмите клавишу ввода или нажмите кнопку преобразования, чтобы получить эквивалент пикселей .

Видеоруководство: преобразование em в

пикселей

Таблица преобразования EM в PX

Таким образом, веб-разработчики/дизайнеры используют общие параметры. Например, 1em для размера шрифта или 25em для ширины контейнера. Ниже приведены лишь некоторые из наиболее часто используемых размеров em и их эквивалент в px.

ЭМ	ПК
0,25 мм	4px
0,5 мм	8px
0,75 мм	12 пикселей
1эм	16 пикселей
2эм	32px
4эм	64px
6,25 мм	100px
12,5 мм	200px
15. 625em	250px
18,75 мм	300px
25эм	400px
37,5 мм	600px
50эм	800px
75эм	1200px

Как конвертировать EM в PX

Просто получите размер шрифта родителя вашего целевого элемента, а затем умножьте свое значение px. Вот как вы получаете эквивалент em .

EM в PX Формула:

px = em * размер шрифта

Как работает ЭМ

Пример: у вас есть разметка, в которой элемент

является родителем элемента

   
    <раздел>
        как они работают.

Когда вы автоматически назначаете размер шрифта элементу

, этот размер шрифта будет равен 1em элемента

   
    раздел {размер шрифта: 16px}

Это означает, что когда я назначаю размер шрифта 2em для элемента

, например:

   
    p {размер шрифта: 2em}

Размер элемента

будет увеличен в 2 раза.

   
    <раздел>
        
как они работают.

я должен использовать пиксели или рем?

Введение

Должен ли я использовать пиксели или ems/rems?!

Я часто слышу этот вопрос. Часто за словами скрывается нотка беспокойства или разочарования. 😅

Это эмоционально заряженный вопрос, потому что существует много противоречивых мнений, и это может быть ошеломляющим. Возможно, вы слышали, что rems лучше для доступности. Или, может быть, вы слышали, что проблема устранена и с пикселями все в порядке?

На самом деле, если вы хотите создать максимально доступный продукт, вам нужно использовать оба пикселя и ems/rems. Это не ситуация «или-или». Есть обстоятельства, когда rems более доступны, и другие обстоятельства, когда пикселей более доступны.

Итак, вот что мы собираемся сделать в этом уроке:

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

К концу вы сможете использовать свою интуицию , чтобы понять, какой юнит использовать в любом сценарии. 😄

Ссылка на этот заголовок

Пиксели

Самая популярная единица измерения для всего, что связано с размером, — это пикселей , сокращение от «пиксель»:

Теоретически 1 пиксель равен одной точке в компьютере. экран монитора или телефона. Это наименее абстрактная единица в CSS, самая близкая к металлу. В результате они, как правило, чувствуют себя довольно интуитивными.

Аппаратные и программные пиксели

Таким образом, единица px — это немного ложь. это не на самом деле аккуратно сопоставляются с аппаратными пикселями.

Если вы посмотрите на современный дисплей под микроскопом, то поймете, что он больше не состоит из четких маленьких прямоугольников R/G/B. Вот снимки экранов Apple Watch и Apple iPhone крупным планом:

(Источники: Apple Watch и iPhone.)

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

Тем не менее, ничто из этого не должно влиять на то, как мы относимся к устройству px . Это по-прежнему самая конкретная единица, которая у нас есть!

Ссылка на эту рубрику

Ems

Аппарат em интересный товарищ. Это относительная единица , основанная на рассчитанном размере шрифта элемента.

Поиграйте с этими ползунками, чтобы понять, что я имею в виду:

По сути, em — это соотношение. Если наш абзац имеет нижнее поле 1,5 em, мы говорим, что оно должно быть в 1,5 раза больше размера шрифта. Это позволяет нам «привязать» одно значение к другому, чтобы они масштабировались пропорционально.

Вот глупый пример. Каждое слово в следующем предложении использует меньшее значение em , создавая впечатление, что предложение исчезает вдали. Попробуйте настроить размер шрифта абзаца и обратите внимание, как все «увеличивается»:

Code Playground

HTML

Это

Предложение

тише

Тише

Результат

Включение чтобы понять, как работает единица измерения em , здесь мы используем размер шрифта в пикселях. Однако, как мы скоро узнаем, это плохая идея. Пожалуйста, не делайте этого в реальных приложениях!

Ссылка на эту рубрику

Rems

Сейчас это старая новость, но было время, когда 9Модуль 0135 rem был блестящим новым дополнением к языку CSS.

Он был введен из-за общей неприятной проблемы с блоком em : он смешивается.

Например, рассмотрим следующий фрагмент:

Насколько велик в пикселях этот шрифт .intro абзаца?

Чтобы это понять, мы должны умножить каждое отношение. Размер корневого шрифта по умолчанию составляет 16 пикселей, поэтому уравнение равно 16 × 1,125 × 0,9 × 1,25 . Ответ: 20,25 пикселей.

Что? Почему?? Это происходит потому, что размер шрифта наследуется . Абзац имеет размер шрифта 1.25em , что означает «в 1,25 раза больше текущего размера шрифта». Но что - это текущий размер шрифта? Ну, он наследуется от родителя: 0. 9em . Таким образом, это 1,25x родителя, что составляет 0,9x его родителя , что составляет 1,125x его родителя .

По сути, нам нужно умножать каждое значение em в дереве, пока мы либо не достигнем «фиксированного» значения (используя пиксели), либо не дойдем до вершины дерева. Это так же грубо, как звучит. 😬

Чтобы решить эту проблему, разработчики языка CSS создали модуль rem . Расшифровывается как «Root EM».

Единица rem аналогична единице em , за исключением того, что она всегда кратна размеру шрифта корневого узла , элемента . Он игнорирует любые унаследованные размеры шрифта и всегда вычисляет на основе узла верхнего уровня.

Документы имеют размер шрифта по умолчанию 16 пикселей, что означает, что 1rem имеет «исходное» значение 16 пикселей.

Мы можем переопределить значение 1rem , изменив размер шрифта на корневом узле:

Мы можем сделать это, но не должны.

Чтобы понять почему, нужно поговорить о доступности.

Основное соображение доступности, когда речь заходит о пикселях и em/rem, это vision . Мы хотим, чтобы люди с ограниченным зрением могли удобно читать предложения и абзацы на наших веб-сайтах и в веб-приложениях.

Есть несколько способов, которыми люди с ограниченным зрением могут увеличить размер текста.

Одним из способов является использование функции масштабирования в браузере. Стандартное сочетание клавиш для этого — ⌘ + + в MacOS, ctrl + + в Windows/Linux.

В этом уроке я назову этот метод масштабированием .

В Руководстве по обеспечению доступности веб-контента (WCAG) указано, что для того, чтобы сайт был доступным, его можно использовать при 200-процентном увеличении. Я слышал от защитников доступности, что это число на самом деле является минимальным, и что многие люди с нарушениями зрения часто крутят гораздо больше, чем это.

Наконец, есть еще один метод, о котором знает меньше разработчиков. Мы также можем увеличить размер шрифта по умолчанию в настройках нашего браузера:

В этом уроке я назову этот метод масштабированием шрифта .

Масштабирование шрифта работает путем переопределения «базового» размера шрифта, размера шрифта по умолчанию, на котором будут основаны все относительные единицы (бэр, эм, %).

Помните ранее, когда мы говорили, что 1rem равно 16px? Это верно только в том случае, если пользователь не менял размер шрифта по умолчанию! Если они увеличат размер шрифта по умолчанию до 32 пикселей, каждый rem теперь будет равен 9.0175 32px вместо 16.

По сути, вы можете думать о масштабировании шрифта как о изменении определения 1 rem.

Здесь мы столкнулись с первой проблемой доступности. Когда мы используем значение в пикселях для размера шрифта на странице, оно больше не будет зависеть от выбранного пользователем размера шрифта по умолчанию.

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

Теперь картина не такая мрачная, как раньше, благодаря масштабированию в браузере .

Когда пользователь увеличивает или уменьшает масштаб, все становится больше. По сути, он применяет множитель к каждой единице, включая пиксели. Это влияет на все, кроме единиц измерения окна просмотра (например, vw и vh ). Так было уже много лет во всех основных браузерах.

Итак, если пользователи всегда могут масштабировать изображение, чтобы увеличить размер шрифта, нужно ли нам беспокоиться о поддержке масштабирования шрифта? Разве одного варианта недостаточно?

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

(Давайте также помнить, что не каждый может легко вызвать сочетание клавиш. Несколько лет назад я получил травму нерва, из-за которой я не мог пользоваться клавиатурой. Я взаимодействовал с компьютером, используя диктовку и отслеживание взгляда. Внезапно , каждое «нажатие клавиши» стало намного тяжелее!)

Как правило, мы должны предоставить пользователю как можно больше контроля, и мы никогда не должны отключать или блокировать работу его настроек. По этой причине очень важно использовать относительную единицу, такую как rem для типографики.

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

Хорошо, давайте посмотрим, что произойдет, когда мы используем rem значений для заполнения:

Помните, что значения rem масштабируются с размером шрифта пользователя по умолчанию. Это хорошая вещь, когда дело доходит до типографики. Однако хорошо ли это, когда дело доходит до других вещей? Действительно ли я хочу, чтобы все масштабировались с размером шрифта?

Существует неявный компромисс, когда речь идет о размере текста. Чем больше текст, тем меньше символов может поместиться в каждой строке. Когда пользователь увеличивает текст на 250%, мы можем уместить только несколько слов в строке.

Когда мы используем значения rem для горизонтального отступа, хотя мы усиливаем этот негативный побочный эффект! Мы сокращаем объем полезного пространства, еще больше ограничивая количество слов, которое может поместиться в каждой строке.

Это плохо
потому что
абзацы
как этот
только с
несколькими словами на
строку
неприятно читать
.

Аналогично, как насчет ширины границ? На самом деле не имеет смысла увеличивать толщину границы по мере того, как пользователь увеличивает свой предпочтительный размер текста, не так ли?

Вот почему мы хотим использовать эти единицы стратегически . Выбирая между пикселями и rems, вот вопрос, который вы должны задать себе:

Должно ли это значение увеличиваться по мере того, как пользователь увеличивает размер шрифта своего браузера по умолчанию?

Этот вопрос лежит в основе моей ментальной модели. Если значение должно увеличиваться с размером шрифта по умолчанию, я использую rem . В противном случае я использую px .

Тем не менее, ответ на этот вопрос не всегда очевиден. Давайте посмотрим на некоторые примеры.

Ссылка на этот заголовок

Медиа-запросы
Должны ли мы использовать пиксели или rems для значений наших медиа-запросов?
Вероятно, не очевидно, в чем здесь различие, поэтому давайте разберем его.
Предположим, пользователь установил размер текста по умолчанию на 32 пикселя, что вдвое больше стандартного размера текста. Это означает, что 50rem теперь будет равно 1600px вместо 800px.
Сдвинув точку останова вверх таким образом, пользователь увидит mobile , пока ширина их окна не станет не менее 1600 пикселей. Если они на ноутбуке, скорее всего, они увидят макет для мобильных устройств, а не макет для рабочего стола.
Сначала я подумал, что это плохо. На самом деле они не являются мобильными пользователями, так зачем нам показывать им мобильную раскладку??
Однако я понял, что мы обычно делаем хотим использовать rems для медиа-запросов.
Давайте рассмотрим реальный пример.
На платформе моего курса у меня есть список навигации слева, содержимое которого отображается справа:
На небольших экранах я хочу максимально увеличить объем пространства для содержимого, чтобы навигация стала переключаемой:
Давайте посмотрим, что произойдет, когда пользователь зайдет с размером шрифта 32 пикселя по умолчанию, используя как пиксели, так и rem медиа-запросы:
Pixel Media Query
Rem Media Query
По мере увеличения размера текста левая навигация становится все шире и шире (поскольку она использует ширину на основе rem). В результате область основного контента сжимается все меньше и меньше.
Однако, когда мы используем медиа-запрос на основе rem, мы возвращаемся к «мобильному» макету. В результате контент становится намного более читабельным, а опыт значительно улучшается.
Мы так привыкли думать о медиа-запросах с точки зрения мобильных устройств, планшетов и настольных компьютеров, но я думаю, что полезнее думать о доступном пространстве.
Мобильный пользователь имеет меньше свободного места, чем пользователь настольного компьютера, поэтому мы разрабатываем макеты, оптимизированные для этого объема пространства. Точно так же, когда кто-то увеличивает размер шрифта по умолчанию, он уменьшить объем доступного пространства, и поэтому они, вероятно, должны получить те же оптимизации.
Ссылка на этот заголовок
Вертикальные поля
Давайте рассмотрим другой сценарий. Вертикальные поля:
Вертикальные поля текста (при условии, что мы работаем на языке с горизонтальным написанием, таком как английский) обычно используются для улучшения его читабельности. Мы добавляем дополнительное пространство между абзацами, чтобы мы могли быстро сказать, где заканчивается один абзац и начинается следующий.
Это пространство имеет «функциональное» назначение, когда речь идет о тексте. Мы не используем его эстетически.
По этим причинам я думаю, что имеет смысл масштабировать эти поля с выбранным пользователем корневым размером шрифта.
Редкая возможность для единицы «em»
Когда мне нужна относительная единица, я почти всегда беру rem . Это намного проще и предсказуемее, чем em , для «составных» проблем, обсуждавшихся ранее.
Тем не менее, 9Единица 0135 em особенно хорошо работает, когда речь идет о полях заголовков и абзацев.
Ссылка на эту рубрику
Ширина и высота
Хорошо, рассмотрим еще один вариант. Здесь у нас есть кнопка с фиксированной шириной:
Итак, мы знаем, что размер шрифта кнопки должен быть установлен в бэрах… но как насчет ее ширины ?
Здесь действительно интересный компромисс:
Если мы установим ширину равной 240px , кнопка не будет увеличиваться с размером шрифта, что приведет к переносу строк и увеличению высоты кнопки.
Если мы установим ширину 15rem , кнопка станет шире вместе с размером шрифта.
Какой подход лучше? Ну, это смотря по обстоятельствам!
В большинстве случаев, я думаю, имеет смысл использовать rems. Это сохраняет пропорции кнопки, ее эстетику. И это снижает риск переполнения, если на кнопке есть особенно длинное слово.
Однако в некоторых случаях лучше использовать пиксели. Может быть, если вы имеете в виду очень конкретную планировку, а вертикальное пространство более многочисленно, чем горизонтальное.
Ограничения
В общем, мы должны быть очень осторожными при установке фиксированной ширины и высоты.
В приведенном выше примере установка width: 15rem во многих случаях нарушит работу мобильных макетов, поскольку может привести к слишком большому значению для своего контейнера, когда пользователь увеличит размер шрифта по умолчанию!
Мы часто можем смягчить это, зафиксировав его максимум на 100%:
Точно так же, когда дело доходит до высоты, мы часто хотим использовать min-height вместо height . Это позволяет контейнеру расти настолько, насколько ему нужно, чтобы содержать своих дочерних элементов. Это становится важным, когда пользователь увеличивает размер шрифта, поскольку текст будет перенесен на большее количество строк.
Итак, мы узнали, что значения rem следует использовать, когда мы хотим масштабировать значение с размером шрифта пользователя по умолчанию.
Что, если не очевидно, какой вариант лучше? Как с шириной кнопки?
В таких случаях лучше всего протестировать его. Измените размер шрифта по умолчанию в браузере на 32 или 48 пикселей и посмотрите, как выглядит ваше приложение. Попробуйте использовать пиксели, а затем попробуйте использовать rems. Какой вариант обеспечивает наилучший пользовательский опыт и наиболее читаемый контент?
Со временем ваша интуиция будет становиться все сильнее и сильнее, поскольку вы сами будете видеть, что делать в конкретных обстоятельствах.
Не знаете, как изменить размер шрифта по умолчанию в браузере? Вот документация для наиболее часто используемых браузеров:
Chrome
Firefox
SAFARI
Edge
Если ваш броузер не будет перечислен здесь. включите его!
У меня есть философия, когда дело доходит до обучения: Лучше развить интуицию, чем полагаться на механическую практику и заучивание.
Этот пост в блоге мог бы быть кратким списком правил: «Используйте пиксели для X, используйте габариты для Y». Но насколько это было бы полезно на самом деле?
Правда в том, что реальный мир запутан и сложен. Никакой набор правил не может быть достаточно всеобъемлющим, чтобы охватить все возможные сценарии. Даже после 15 лет написания CSS я все еще постоянно сталкиваюсь с новыми проблемами макета!
Когда мы концентрируемся на развитии интуиции, нам не нужно запоминать правила. Мы можем положиться на нашу ментальную модель, чтобы найти правильный ответ. Это намного практичнее.
И все же большинство из нас учится на «быстрых трюках». Подбираем интересный самородок в Твиттере. Мы запоминаем небольшой фрагмент, чтобы центрировать div или применить гибкую сетку. И, неизбежно, мы сталкиваемся с трудностями, когда фрагмент не работает, как мы ожидали, и мы понятия не имеем, почему.
Я думаю, именно поэтому так много разработчиков не любят писать CSS. У нас неоднородная ментальная модель, и эти дыры делают язык хрупким и непредсказуемым, как карточный домик, который всегда на грани краха.
Когда мы концентрируемся на интуиции, на изучении того, как на самом деле работает CSS , язык становится приятным в использовании. Раньше меня раздражал CSS, но теперь это одна из моих любимых частей веб-разработки. Я люблю писать CSS.
Я хотел разделить эту радость, поэтому я уволился с работы и потратил год на создание всеобъемлющего онлайн-курса для самостоятельного изучения. Это называется CSS для разработчиков JavaScript.
Этот курс использует подход, который мы использовали в этом руководстве, и применяет его к весь язык CSS. Используя интерактивные демонстрации и фрагменты кода, редактируемые в режиме реального времени, мы изучаем, как работает язык, и как вы можете создать интуицию, которую вы можете использовать для реализации любого макета . Не только те, которые мы освещаем явно.
Я создал индивидуальную платформу курсов с нуля, используя тот же набор технологий, что и мой блог. Но это гораздо больше. Он включает в себя множество коротких видеороликов, упражнений, проектов, вдохновленных реальным миром, и даже несколько мини-игр. ✨
Он специально создан для разработчиков JavaScript, которые используют фреймворк на основе компонентов, такой как React или Vue. Помимо основных концепций языка, мы также изучаем такие вещи, как создание библиотеки компонентов с нуля.
Если вам надоело не понимать, как работает CSS, этот курс для вас. 💖
Узнайте больше здесь: https://css-for-js.dev/
Итак, как мы видели, есть много случаев, когда нам нужно использовать значения rem для достижения наилучших результатов.
К сожалению, работать с этим юнитом довольно сложно. Не так-то просто произвести математику преобразования в уме. And we wind up with a lot of decimals:
14px → 0. 875rem
15px → 0.9375rem
16px → 1rem
17px → 1.0625rem
18px → 1.125rem
19px → 1.1875rem
20px → 1.25rem
21px → 1.3125rem
Прежде чем вы запомните этот список, давайте посмотрим, что мы можем сделать, чтобы улучшить опыт работы с rems.
Ссылка на этот заголовок
Трюк на 62,5%
Начнем с одного из самых распространенных вариантов, которые я видел в Интернете.
Вот как это выглядит:
Идея состоит в том, что мы уменьшаем размер корневого шрифта, чтобы каждая единица rem равнялась 10px вместо 16px.
Людям нравится это решение, потому что математика становится намного проще. Чтобы получить rem , эквивалентный 18px, вы перемещаете десятичную дробь (1,8 rem) вместо того, чтобы делить 18 на 16 (1,125 rem).
Но, честно говоря, я не рекомендую такой подход. Есть несколько причин.
Во-первых, это может нарушить совместимость со сторонними пакетами. Если вы используете библиотеку всплывающих подсказок, которая использует размер шрифта на основе rem, текст в этих всплывающих подсказках будет на 37,5% меньше, чем должен быть! Точно так же он может сломать расширения браузера, которые есть у конечного пользователя.
В сети бытует базовое предположение, что 1rem создаст читаемый текст. Я не хочу связываться с этим предположением.
Кроме того, этот подход сопряжен со значительными трудностями миграции. Не существует разумного способа «поэтапно принять» его. Вам нужно будет обновить каждую декларацию, которая использует rem единиц в приложении. Кроме того, вам нужно будет убедить всех своих товарищей по команде, что это того стоит. С точки зрения логистики я не уверен, насколько это реально для большинства команд.
Давайте рассмотрим несколько альтернативных вариантов.
Ссылка на этот заголовок
Расчетные значения
CSS-функцию calc можно использовать для преобразования значений пикселей в rems:
(Спасибо пользователю Twitter Cahnory за улучшение моей первоначальной идеи!)
Довольно круто, правда ? Мы можем посчитать прямо внутри объявления CSS, и calc выдаст правильный ответ.
Это жизнеспособный подход, но он слишком многословен. Каждый раз, когда вы хотите использовать 9, приходится много печатать.0135 rem значение.
Рассмотрим еще один подход.
Ссылка на этот заголовок
Использование переменных CSS
Это мой любимый вариант. Вот как это выглядит:
Мы можем выполнить все вычисления один раз и использовать переменные CSS для хранения этих параметров. Когда нам нужно их использовать, это почти так же просто, как ввести значения пикселей, но полностью доступно! ✨
Немного необычно начинать переменные CSS с такого числа, но оно соответствует спецификации и работает во всех основных браузерах.
Если вы используете дизайн-систему со шкалой интервалов, мы можем использовать тот же трюк:
Переменные CSS просто восхитительны. Мы изучаем множество интересных вещей, которые мы можем сделать с ними в CSS для разработчиков JavaScript!
В конечном итоге все эти методы сработают. У меня, конечно, есть свои предпочтения, но главное — это опыт конечного пользователя.