Доводы в пользу применения rem в CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Secrets to using rem in CSS: CSS Tips».

Photo by cottonbro from Pexels

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

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

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

Поэтому ваш сайт должен реагировать на подобные настройки!

За последние пару лет я перестала использовать пиксели в качестве единиц измерения и всем советую поступать так же. Давайте рассмотрим, почему вам следует использовать единицы rem.

rem или em?

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

Пример:

 
/*Базовый fontsize - 16px*/
1rem = 16px
2rem = 32px
1em = 16px
2em = 32px

Разница между единицами в том, что единицы rem в качестве базы всегда используют значение корневого элемента (html), а em — значение своего контейнера (родительского элемента).

Пример:

 
/*Базовый fontsize - 16px*/
/*fontsize родительского элемента - 20px*/
1rem = 16px
2rem = 32px
1em = 20px
2em = 40px

Что такое значение корневого элемента?

Базовый размер шрифта по умолчанию устанавливается браузером. При этом в большинстве браузеров 1 rem = 16 px. Это означает, что вы даже можете использовать стандартизированную 8-пиксельную сетку, поскольку 0,5 rem = 8 пикселей.

Если изменить font-size элемента html, можно установить базовое значение по своему усмотрению. Но весь смысл в том, что по умолчанию значение задает браузер. Это отдает контроль в руки пользователя, который может менять настройки в браузере.

Fluid-элементы

Используя единицы rem и позволяя браузеру (и пользователю) управлять базовым значением, вы создаете масштабируемые элементы, сохраняющие свою форму при увеличении или уменьшении размера.

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

Пример:

h2 {
   font-size: 2rem; 
 }
p {
   font-size: 1rem;
}

Заголовок всегда будет крупнее, чем текст абзаца, независимо от его базового размера. Они масштабируются вместе. То же самое и с кнопками, font-size, border-radius и padding — все масштабируется вместе с базовым размером.

А как насчет пикселей?

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

css3 — Единицы измерения rem и px

Доброго времени суток. Я несколько дней пытаюсь найти ответ на свой вопрос. Решила обратиться к вам. Хотелось бы начать пользоваться при верстке такими единицами, как

rem, но нигде нет информации, как и где их применять. В основном информация одна и та же. Я знаю, что не только Rem, но и px. Как их правильно использовать вместе? Может, вы знаете какую-то статью или сами верстаете. Подскажите, пожалуйста. Заранее благодарю.

  • css3
  • вёрстка
  • css
0

Вот, например, эта статья: Адаптивные размеры шрифтов при помощи REM

С самого зарождения интернета люди начали дискутировать на тему того, как лучше всего определять шрифты. Кроме традиционных кандидатов – вроде px, em и %, – есть еще единица измерения rem, которая представляет собой довольно новую альтернативу, совмещающую в себе лучшие свойства своих предшественников.

5

@kamila, не совсем понятен Ваш вопрос: «Как их правильно правильно использовать вместе?»

Для себя, я это понимаю так: «rem unit» — это практически то же, что и «em unit«, с той лишь разницей, что «em» масштабирует шрифт относительно font-свойств его ближайшего или прямого родительского элемента, а «rem» — всегда относительно корневого элемента.

А вот «px unit«, в отличие от них, не масштабируется.

7

Крайне рекомендую ознакомиться со следующей статьей:

Font Size Idea: px at the Root, rem for Components, em for Text Elements

В ней есть очень наглядный пример использования этих значений.

Еще полезно будет почитать вот эту подборку:

Why Ems?
px – em – % – pt – keyword
Relative is the new absolute: the rem unit
Should I use px or rem in my css?

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Что такое Бэр? (и как их использовать в CSS)

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

Rem (сокращение от «root-em») Единицы определяют размер шрифта элемента относительно размера корневого элемента. По умолчанию большинство браузеров используют значение размера шрифта 16px. Таким образом, если корневой элемент имеет размер 16 пикселей, элемент со значением 1rem также будет равно 16px. Таким образом, единицы rem полезны для масштабирования элементов CSS по отношению к размеру корневого элемента, даже если вы не знаете, какой будет размер шрифта по умолчанию.

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

Что такое CSS?

Для адаптивных веб-страниц размер веб-элементов изменяется в зависимости от размера области просмотра. CSS позволяет вам объявлять размер шрифта, используя абсолютные единицы, такие как пиксели (px), или относительные единицы, такие как проценты, em или единицы rem.

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

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

Единицы Em относятся конкретно к родительскому элементу, позволяя элементу масштабироваться в контексте родителя. Рассмотрим p  тег, вложенный в элемент article    с размером шрифта 18 пикселей:

 
 . article { 
   font-size: 18px; 
 
 } 
 
 p { 
 
   размер шрифта: 2em; 
 
   /* устанавливает размер шрифта = 36 пикселей */ 
 
 }

Присвоение элементу p размера шрифта 2em  приводит к фактическому размеру 36 пикселей, что вдвое превышает значение 9000 5 статья шрифт элемента.

Что такое rem CSS?

Подобно единицам em, бэры являются относительными единицами. Однако они ссылаются на корневой элемент — обычно это сам элемент HTML  . Большинство браузеров устанавливают размер шрифта по умолчанию равным 16px. Однако вы можете изменить это. Например, чтобы изменить размер шрифта на 14 пикселей, добавьте в таблицу стилей следующее:

 
 html { 
   font-size: 14px 
 
 }

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

Например, предположив, что размер шрифта по умолчанию для корневого объекта равен 16 пикселей, вы должны оформить абзац с размером шрифта 12 пикселей, используя 0,75rem , потому что 12 ÷ 16 = 0,75:

 
 p { 
  размер шрифта: 0,75 бэр; 
 
 }

Выполнение этих вычислений каждый раз, когда вы хотите преобразовать рем в пиксели, может довольно быстро разочаровать. Рассмотрим следующие значения, полученные путем преобразования 14px, 18px и 20px в бэр-единицы:

  • 14 пикселей = 0,875 бэр
  • 18 пикселей = 1,125 бэр
  • 20 пикселей = 1,25 бэр

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

К счастью, трюк с 62,5% призван решить эти проблемы. При установке размера корневого шрифта на 62,5% от его значения по умолчанию эталонное значение обычно становится 10 пикселей, что делает указанные выше значения равными 1,4 rem, 1,8 rem и 2,0 rem соответственно.

Но зачем устанавливать размер основного шрифта 62,5 % вместо 10 пикселей?

Одним из основных преимуществ относительных единиц является их масштабируемость независимо от физического размера дисплея. Изменение корневого значения с использованием абсолютной единицы означает, что содержимое будет трудно читать или перемещаться по нему. Трюк 62,5% гарантирует, что разработчики могут легко масштабировать значения, не беспокоясь о типе устройства, используемого для просмотра контента.

Реализация трюка 62,5% в вашем CSS будет выглядеть следующим образом:

 
 html { 
   font-size: 62,5%; 
 
   /* изменяет размер шрифта 16px по умолчанию на 10px */ 
 
 
 } 
 
 h2 { 
 
   font-size: 2.4rem; 
 
   /* размер шрифта = 24 пикселя */ 
 
 } 
 
 h3 { 
 
   font-size: 1.6rem; 
 
   /* размер шрифта = 16 пикселей */ 
 
 } 
 
 p { 
 
   font-size: 1.2rem; 
 
   /* размер шрифта = 12 пикселей */ 
 
 }

Как видите, расчет рем-единиц с использованием базы 10 пикселей упрощает задачу. Однако есть шанс, что трюк с 62,5% может увеличить вашу рабочую нагрузку. Если ваше тело должно иметь размер 12 пикселей, вам в конечном итоге придется установить размер шрифта для большинства модулей или элементов на 12 пикселей. В этом случае вы могли бы вместо этого установить размер тела на 12 пикселей. Так что имейте это в виду при использовании этого трюка.

Использование Rem в медиа-запросах

Спецификация медиа-запросов утверждает, что медиа-запросы (почти) всегда независимы от каких-либо внутренних стилей в документе.

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

Это означает, что трюк с 62,5% не работает в блоке медиа-запроса, и 1rem внутри будет равен 16px или значению, указанному пользователем.

Возьмем этот пример с точкой останова мультимедиа 32rem :

 
 html { 
   font-size: 62,5%; 
 
   /* размер шрифта: 10 пикселей */ 
 
 } 
 
 h2 { 
 
   размер шрифта: 2,4 рем; 
 
   /* font-size: 24px */ 
 
 } 
 
 @media (width <= 32rem) { 
 
   h2 { 
 
     font-size: 2rem; 
 
   } 
 
 }

Точкой останова здесь будет не 32 × 10 пикселей = 320 пикселей, а 32 × 16 пикселей = 512 пикселей.

Почему вы должны использовать единицы rem?

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

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

Rem Единицы и проценты

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

Например, в макете с двумя столбцами можно использовать проценты для разделения контейнера:

 
 .column1 { 
   ширина: 75%; 
 
 } 
 
 .column2 { 
 
   ширина: 25%; 
 
 }

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

Единицы Rem и Em

В то время как единицы rem относятся к корневому элементу, em относятся к родительскому элементу.

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

 
 .parent { 
   размер шрифта: 18 пикселей; 
 
 } 
 
 .child { 
 
   размер шрифта: 2em; 
 
 /* размер шрифта: 36 пикселей */ 
 
 }

Фактический размер шрифта ребенка составляет 2 × 18 пикселей = 32 пикселя.

Если для родительского элемента не задан размер шрифта, em будет проверять следующий родительский элемент в дереве DOM — вплоть до корневого элемента — до тех пор, пока не найдет единицу измерения для ссылки.

Когда em используется для значений измерения, отличных от размера шрифта, его значение получается из размера шрифта этого элемента. Вот пример h2  с использованием единиц em, вложенных в div  element:

 
 div { 
   font-size: 12px; 
 
 } 
 
 h2 { 
 
   размер шрифта: 2em; 
 
   набивка: 1,5 см; 
 
 }

Здесь размер шрифта h2 составляет 24 пикселя (2 × 12 пикселей). Затем значение отступа рассчитывается из этого значения как 1,5 × 24 пикселей = 36 пикселей.

Проблема с em заключается в том, что размер шрифта увеличивается при вложении элементов.

Возьмем этот пример вложенного списка, оформленного с помощью CSS:

 
 <стиль> 
   div { 
 
     размер шрифта: 15 пикселей 
 
   } 
 
   li { 
 
     размер шрифта: 2em 
 9000 2   } 
 
  
 
  
 
   
 
 
     
     
     
           
  • Напитки (30px) 
     
             < ul> 
     
               
  • Чай (60px) 
                   
       
       
                       
    • Чай черный (120px)
      •  
       
                     
    • Зеленый чай (120px
      •  
       
                   
     
     
               
    •  
     
             
 
 9000 2        
 
      
 
  

Вы можете избежать этого эффекта с помощью единиц rem, так как размер шрифта всех элементов в документе является производным от размера шрифта элемента HTML. 0003

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

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

Использование Rem, Em и процентов в CSS

Единицы Rem позволяют устанавливать размеры относительно корневого элемента. Таким образом, они отличаются от других вариантов размеров, таких как единицы em, которые зависят от родительского элемента, или проценты, реальные значения которых зависят от свойства, для которого они используются.

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

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

rem vs em Единицы в CSS. У нас есть много хороших вариантов, когда дело доходит до… | от Hossam Hilal

5 минут чтения

·

16 февраля 2020 г.

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

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

  • em Единицы измерения свойства font-size будут относиться к размеру шрифта родительского элемента.
  • единицы em для других свойств, кроме размера шрифта, будут относиться к размеру шрифта текущего элемента. Размеры единиц
  • rem всегда будут относиться к размеру шрифта корневого элемента html . подходит для ваших вариантов использования. Разберем его как можно короче.
  • Используйте REM для размеров и интервалов.
  • Используйте EM для медиа-запросов.

Пиксели (px) — это то, к чему мы все привыкли за эти годы. Все знают, что такое пиксель (хотя размер пикселя не всегда одинаков, но это в другой раз). Всем удобно использовать пиксели. Они легко переводимы. Дизайнеры, как правило, работают с пикселями, поэтому размеры можно брать непосредственно из Photoshop прямо для сборки.

Так что же не так с пикселями?

Я большой сторонник доступности в Интернете. В любой день я бы предпочел доступность «красивости».

Если вы устанавливаете все размеры шрифта, размеры элементов и интервалы в пикселях, вы неуважительно относитесь к конечному пользователю.

В большинстве браузеров пользователь может установить размер шрифта браузера по умолчанию, отличный от размера по умолчанию (обычно 16 пикселей). Если пользователь устанавливает значение по умолчанию 20 пикселей, все размеры шрифтов должны масштабироваться соответствующим образом.

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

К счастью, установка размера шрифта в пикселях не полностью нарушает доступность. Пользователь по-прежнему может увеличивать и уменьшать масштаб с помощью Ctrl Plus +/- (cmd вместо Ctrl в OS X). Однако мы можем добиться большего.

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

Возьмем простой пример:

.parent { font-size: 18px; } .child { размер шрифта: 1.5em; }

 .родительский { 
 размер шрифта: 18px; 
 } .child { 
 размер шрифта: 1,5 em; 
 }

В этом примере

дочерний элемент будет иметь размер шрифта 27 пикселей (1,5 * 18 пикселей = 27 пикселей).

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

Довольно просто и понятно, верно? Однако единицы em можно использовать не только для установки размера шрифта, но и практически везде, где ожидаются единицы измерения:

  • padding
  • margin
  • width
  • height
  • max-width
  • …

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

Добавим к нашему примеру:

 .parent { 
 размер шрифта: 18px; 
 }.child { 
 размер шрифта: 1.5em; 
 отступы: 2em 1em; 
 }
  • Отступы сверху и снизу на .child будут 54px. Это в 2 раза больше размера шрифта нашего текущего элемента (2 * 27px)
  • Отступы слева и справа на .child будут иметь размер 27 пикселей. Это в 1 раз больше размера шрифта нашего элемента.

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

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

Сохраним аналогичный базовый пример:

 .parent { 
 размер шрифта: 15 пикселей; 
 }.child { 
 размер шрифта: 2em; 
 }

Но давайте использовать его в нашей разметке следующим образом:

 parent  "> 
 I'm 15px 
 child  "> 
 I'm 30px, как и ожидалось 900 29 child  "> 
 У меня 60px, начинаются проблемы! 
 child  "> 
 Я 120px, теперь у нас действительно проблемы!