rem – перевод на русский — с английского | PROMT.One Переводчик

Ремы, емы, и почему отказ от них — не проблема

Перевод статьи David Gilbertson: rems and ems, and why you probably don’t need them

Возможно, вы слышали, что при определении размера элементов на вашем сайте, вы должны использовать em или rem единицы, а не старые добрые пиксели.

Вы, вероятно, слышали такие словечки как «доступность», «подвижность» и «гибкость», и думали, что это звучит как довольно хорошая идея. Может быть, вы даже считаете, что использовать только пиксели — это любительский ход.

Ну, у меня есть для вас фантастические новости. Вам не нужно усложнять свою жизнь этими надоедливыми единицами.

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

Что значит r.e.m.

Что такое px, em, rem в css

Это делает сайты более доступными (для людей с ограничениями)

Или конкретнее: «используйте rem, и ваш макет будет лучше масштабироваться, если пользователь увеличивает страницу».

Масштабирование контрольных точек при использовании rem/em

Другими словами, если вы определяете контрольные точки в пикселях, они фиксированы и не изменятся, если ваши пользователи увеличивают страницу. Поскольку пиксель — это пиксель, верно?

В данном случае, контрольными точками автор называет условия, заданные через медиа-запросы: “@media (max-width: 600px)”. Примечание переводчика

Это просто ложь. (Я предполагаю, что в какой-то момент в прошлом это было правдой, люди же не просто так что-то придумывают, не так ли?)

У моего великолепного примера есть контрольная точка в 600px. Она так же установлена как 37.5em для среднего и 37.5rem для нижнего примера. Без увеличения они все равны 600px.

Ниже этого размера текст отправителя и темы располагается вертикально, над ним они расположены бок о бок.

Давайте запустим IE11 для смены темпа. Я увеличиваю страницу до 150%, затем перетаскиваю окно так, чтобы оно было шириной около 900 пикселей. (Для тех, кому важна математика, это 600px × 150%.)

Итак, как вы думаете, что IE11 будет делать?

Считает ли он, что контрольная точка абсолютна на 600px все время, и, следовательно, показывает изображение на весь экран? Или он отрегулирует эту контрольную точку на 150%, так что изменение произойдет на 900px (в этом случае, мы получим узкий вертикальный текст)?

Я был достаточно удивлен, обнаружив, что IE действительно масштабировал мои контрольные точки при увеличении.

И это в древнем IE11. А как насчет других браузеров…

Safari сделал именно то, что я ожидал. (Что странно.)

Он разумно масштабировал мою 600px контрольную точку, но не совсем до 900px. Довольно неплохо, хотя здесь окно намного шире, чем контрольная точка в 600px, но при увеличении на 150% все три примера отображались так, как если бы они были уже контрольной точки.

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

Если вы должны поддерживать IE8, и оказывается, что он не масштабирует контрольные точки, у вас может быть законная причина использовать rem. (Конечно, IE8 не поддерживает медиа-запросы и rem, но давайте не будем заострять внимание на этом.)

Используйте em для «динамического» задания отступов вокруг текста

Это почти хорошая идея, и я вижу, откуда берутся её сторонники. «Зачем менять font-size и padding, когда вы можете использовать em для padding, а затем только изменить размер шрифта?», — говорят они.

Я понимаю, я действительно так делаю. Я просто предпочитаю быть точным и установить, скажем, размер шрифта и отступы для кнопки так, чтобы он был ровно 60 пикселей на больших экранах и ровно 50 пикселей на маленьких экранах, визуально соответствуя моей точно заданной в 60px/50px панели заголовка.

И если мои проекты приходят от профессионального дизайнера, мне еще предстоит встретить того, кому безразлично, какого размера кнопка. Существует ли такое существо?

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

Создавайте модули, размер которых можно изменить, просто изменив font-size корневого элемента

Написание этих слов, которые вы так любезно читаете, были подстегнуто сообщением в блоге, которое вышло несколько недель назад. Создайте отзывчивый сайт используя задание размеров через em.

Он объясняет (аккуратно), что, используя комбинацию rem и em, вы можете создать компонент (скажем, модальное окно), который можно масштабировать до разных размеров, просто изменяя единственный font-size в корневом элементе компонента.

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

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

Вот мой совет. Когда вы начинаете проект, спросите себя: нужно ли мне создавать какие-либо модули, которые иногда бывают определенного размера, а в другом случае будут на 10% больше в каждом измерении. Если да, следуйте рекомендациям в сообщении в блоге выше, это именно то, что вы ищете. (И положи лопату в багажник, ты, сумасшедший.)

Percent

Следующее значение, которое мы рассмотрим это проценты (%). Вы же помните, что браузер по умолчанию использует значение 16px? Это значит, что все относительные единицы, которые мы будем использовать в дальнейшем тоже будут преобразовываться в проценты. Но мы этого с вами не увидим, т.к. эти процессы будут проходить внутри браузера.

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

Для тега p добавим следующее:

p { font-size: 100%;
}

Если бы мы были браузерами, то высчитали значение font-size: 16px. Далее переходим к span. Стилизуем его:

p>span { font-size: 50%;
}

Мы увидим, что вложенный span и тот span, который находится внутри него, стали равнозначны значению 8px. Как мы это посчитали? Итак, font-size: 100% = 16px и если мы берем половину, то есть 50%, то половина этого значения и будет значение 8px.Теперь давайте стилизуем еще большую вложенность:

p>span>span { font-size: 400%;
}

Если бы мы указали здесь значение 200%, вышло бы, что мы взяли 2 раза по 8px, складываем 8px 8px = 16px. Если мы укажем здесь 400%, то здесь у нас станет значение в два раза больше, то есть 16px * 2 = 32px.

Pixels

Давайте начнем с самого распространенного — px (c англ. pixels). Пиксель — это базовая, абсолютная и окончательная единица измерения. Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.

Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс box-px за счет которого мы и будем стилизовать текст, который находится внутри.

Бонусный уровень: по теме единиц

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

• Если у вас есть два смежных кусочка текста и вы хотите, чтобы между ними был пробел, попробуйте 1chдля размера.
• Если вы хотите, чтобы цвет body background заполнил хотя бы одну страницу по вертикали, попробуйте 100vh вместо 100%. Но в целом, если вы собираетесь использовать vh, вам лучше тестировать на iOS устройствах.
• Вы знаете, что vertical-align может быть задан в процентах? Если вы обнаружили, что vertical-align: super или top не выстраиваются так, как вам нужно, не добавляйте что-то грязное, например position: relative и top: -3px. Вместо этого попробуйте vertical-align: 30%.
• Когда дело доходит до гибких раскладок, не забывайте о flex-grow и flex-shrink. Может быть немного сложно изменить сознание для их принятия, но точно так же как гигантский леденец, они стоят этого.

Вы можете масштабировать весь текст на своей странице с помощью одного свойства

(Я решил больше не нумеровать заголовки.)

Другая загадочная причина использования em выглядит следующим образом: вы определили размер шрифта в своем CSS, всего, например, в 50 разных местах. Вы хотите, чтобы все 50 случаев отображались крупнее на больших экранах, а на меньшем экране — меньше, и это порождает множество медиа-запросов.

Эту проблему, по-видимому, лучше всего решить, используя rem везде, а затем изменив размер корневого шрифта в ваших медиа-запросах. Бум! Весь ваш текст сразу изменит размер.

Я думаю, что этот совет можно смело игнорировать по двум причинам. Я перечислил их для вас.

1. Предполагается, что вы хотите увеличить/уменьшить весь текст на вашем сайте одновременно для заданной контрольной точки. Заголовки, пункты меню, основной текст, все сразу, все по одному и тому же фактору. Вот это смелость.
2. Реальная проблема здесь заключается в том, что размер шрифта определен 50 раз. Если это сделали вы, то вам нужно подумать об организации грамотной типографики на вашем сайте. О нет, вы слышите это? Это стучат копыта проповеди о типографике…

Вот что, когда у вас есть отдельный файл только для типографики, и у вас есть, скажем, 12 стилей, и для каждого стиля у вас есть разные размеры для четырех размеров экрана, это 48 различных объявлений размера шрифта и, возможно, высоты строк, отступов, и межбуквенных расстояний тоже. Как однажды сказал Уинстон Черчилль, «это очень много».

Теперь, легко увидеть все это и подумать: «О нет, это означает кучу повторений, нам нужно сделать это по-другому — чего бы это не стоило — чтобы избежать повторения».

Я не согласен. Сильно не согласен. Слишком часто я вижу сложность, внедряемую в приложения во имя Всемогущего DRY. Не стоит недооценивать, насколько возрастает сложность при смешивании нескольких единиц. НАСА использовало две разные единицы на Mars orbiter, и они все еще не могут найти его (автор имеет ввиду неудачную миссию Mars Climate Orbiter, результаты которой, возможно, привели к окончательному переходу NASA на метрическую систему, — прим. пер.).

Не дайте своему сайту потеряться в космосе.

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

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

Эта напыщенная речь продолжалась гораздо дольше, чем то, что вы только что прочли, но я написал остальное в письме и не отправил его.

Ознакомиться подробнее с html и css можно тут:

Давайте создадим еще один пример и поговорим о некоторых тонкостях с использованием rem. Давайте снова создадим box, внутри которого будет содержаться тег h2 и p

В заключение

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

Поэтому не ищите причины использовать em и rem. Достаточно того, что они делают. Используйте пиксели, и если сценарий покажет, что em или rem являются в данном случае лучшим инструментом, перейдите на них.