Rem html: rem | CSS | WebReference

Leave a Comment / Html / By /

rem | CSS | WebReference

  • Содержание
    • Пример
    • Спецификация
    • Браузеры

Единица rem соответствует значению свойства font-size корневого элемента <html>. Если rem добавляется непосредственно к font-size для <html> или стиль для <html> не задан, тогда 1rem принимается равным исходному значению font-size. В браузерах по умолчанию 1rem = 16px.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>rem</title> <style> html { font-size: 62.5%; } /* 10px */ body { font-size: 1.8rem; } /* 18px */ h2 { font-size: 2.8rem; } /* 28px */ </style> </head> <body> <h2>Почему возможна интроекция?</h2> <p>Как отмечает Д. Майерс, у нас есть некоторое чувство конфликта, которое возникает с ситуации несоответствия желаемого и действительного.</p> </body> </html>

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

Спецификация

СпецификацияСтатус
CSS Values and Units Module Level 4Рабочий проект
CSS Values and Units Module Level 3Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

912411.64.13.6
24124

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

См. также

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.09.2019

Редакторы: Влад Мержевич

rem, em — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Realetive советует
    2. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента <html> или <svg> — rem (от root ephemeral unit — «главная относительная единица»).

Пример

Секция статьи «Пример»

Пусть размер шрифта корневого элемента <html> будет равен 16 пикселям:

html {  font-size: 16px;}
          html {
  font-size: 16px;
}

Тогда размер шрифта элемента с классом block будет равна 16px × 1,5 = 24px:

. block {  font-size: 1.5rem;}
          .block {
  font-size: 1.5rem;
}

Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em, то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.

.block__elem {  width: 5em;}
          
 .block__elem {
  width: 5em;
}

Но если самому элементу задать размер шрифта 2em, то к унаследованному размеру добавится множитель: 16px × 1,5 × 5 × 2 = 240px.

.block__elem {  font-size: 2em;  width: 5em;}
          .block__elem {
  font-size: 2em;
  width: 5em;
}

Как пишется

Секция статьи «Как пишется»

Как и другие CSS-единицы измерения (px, pt, vw, vh и другие) — пишутся сразу после числового значения без пробела:

. selector {  width: 10em;}.selector {  margin: 5rem;}
          .selector {
  width: 10em;
}
.selector {
  margin: 5rem;
}

Как понять

Секция статьи «Как понять»

Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width, height, padding, margin, border-width и других.

Итоговое значение размера, заданное через em и rem вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem изменится — изменится и итоговое значение.

Подсказки

Секция статьи «Подсказки»

💡 Часто при работе с rem для селектора html пишется следующее CSS-правило:

html {  font-size: 62.5%;}
          html {
  font-size: 62.5%;
}

Магическое число 62. 5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.

Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.

На практике

Секция статьи «На практике»

Realetive советует

Секция статьи «Realetive советует»

🛠 Если размер страницы изменён глобально (через настройки операционной системы) или с помощью Ctrl + / Ctrl -, значение шрифта у <html> также пропорционально изменится (даже если было задано явно). Если при вёрстке вы сможете найти закономерности размеров относительно размера шрифта (даже внешние отступы margin, внутренние отступы padding, ширины width или высоты height), то такое масштабирование будет происходить более пропорционально.

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

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

html {  /* 10px */  font-size: 62.5%;}.title-block {  /* 10rem * 10px = 100px */  width: 10rem;  /* 2rem * 10px = 20px */  font-size: 2rem;}@media (max-width: 640px) {  html {    /* 8px */    font-size: 50%;  }}
          html {
  /* 10px */
  font-size: 62.5%;
}
.title-block {
  /* 10rem * 10px = 100px */
  width: 10rem;
  /* 2rem * 10px = 20px */
  font-size: 2rem;
}
@media (max-width: 640px) {
  html {
    /* 8px */
    font-size: 50%;
  }
}

Без дополнительных правил размер блока уменьшился до 80px, а размер шрифта внутри до 16px.

Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

vw, vh, vmin, vmax

alt + ←

→

CSS-анимации

alt + →

Что такое Бэр? (и как их использовать в 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; 
 
   /* устанавливает размер шрифта = 36px */ 
 
 }

Присвоение элементу p размера шрифта 2em  приводит к фактическому размеру шрифта 36px — вдвое больше значения элемента article 90.

Что такое rem CSS?

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

 
 html { 
   font-size: 14px 
 
 }

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

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

 
 p { 
   font-size : 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. 4rem; 
 
   /* 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:

 
  
 
  
     
     
     
  •  Напитки (30px) 
     
     
       
       
       
    •  Чай (60px) 
       
       
         
         
         
      •  Черный чай (120px) 
        •  
         
         
      •  Зеленый чай (120px 
        •  
         
         
       
       
       
      •  
       
       
     
     
     
    •

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

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

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

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

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

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

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

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

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

 

Темы: Начальная загрузка и CSS

Не забудьте поделиться этим постом!

Единицы CSS

❮ Предыдущая Далее ❯

Единицы CSS

CSS имеет несколько различных единиц измерения длины.

Многие свойства CSS принимают значения длины, например ширина , поля , отступ , размер шрифта и т. д.

Длина — число, за которым следует единица длины, например 10px , 2em и т.  д.

Пример

Задайте разные значения длины, используя px (пиксели):

h2 {
  размер шрифта: 60 ​​пикселей;
}

p {
  размер шрифта: 25 пикселей;
высота строки: 50px;
}

Попробуйте сами »

Примечание: Между числом и единицей измерения не должно быть пробела. Однако, если значение 0 единицу измерения можно не указывать.

Для некоторых свойств CSS допускается отрицательная длина.

Существует два типа единиц измерения длины: абсолютные и относительные .

Абсолютные длины

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

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

Блок Описание
см см Попытайся
мм мм Попытайся
в дюйм (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей * пикселей (1 пиксель = 1/96 дюйма) Попытайся
балл (1 балл = 1/72 от 1 дюйма) Попытайся
шт пик (1 шт = 12 пт) Попытайся

* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

Relative Lengths

Единицы относительной длины задают длину относительно другого свойства длины. Единицы относительной длины лучше масштабируются между разными средами рендеринга.

№
Блок Описание
эм Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта) Попробуйте
бывший Относительно x-высоты текущего шрифта (используется редко) Попробуйте
ч Относительно ширины «0» (ноль) Попробуйте
рем Относительно размера шрифта корневого элемента Попробуйте
вв Относительно 1% ширины окна просмотра* Попробуйте
вх Относительно 1% высоты окна просмотра* Попробуйте
об/мин Относительно 1% меньшего размера области просмотра* Попробуйте
вмакс Относительно 1% большего размера окна просмотра* Попробуйте
% Относительно родительского элемента Попробуйте

Совет: Единицы em и rem удобны для создания идеальных масштабируемая планировка!
* Viewport = размер окна браузера.