Относительные единицы в CSS

Относительные единицы CSS

Относительная единица получает свою длину от другого свойства длины, например у родительского элемента, корневого элемента или окна просмотра (viewport).

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

Совет: Для масштабируемых и адаптивных веб-сайтов em и rem — отличный выбор!

Viewport — это размер окна браузера. Поскольку 1vw равен 1% его текущей ширины, при ширине viewport 500px значение 1vw равно 5px.

Таблица относительных единиц

В таблице перечислены относительные единицы CSS и то, относительно чего измеряется каждая из них.

index.html 
<table>
  <tr>
    <th>Unit</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>em</td>
    <td>Relative to the font-size of the parent element</td>
  </tr>
  <tr>
    <td>rem</td>
    <td>Relative to the font-size of the root HTML element</td>
  </tr>
  <tr>
    <td>vw</td>
    <td>Relative to 1% of the width of the viewport. 100vw = full width of the viewport</td>
  </tr>
  <tr>
    <td>vh</td>
    <td>Relative to 1% of the height of the viewport. 100vh = full height of the viewport</td>
  </tr>
  <tr>
    <td>vmin</td>
    <td>Relative to 1% of viewport's smaller dimension</td>
  </tr>
  <tr>
    <td>vmax</td>
    <td>Relative to 1% of viewport's larger dimension</td>
  </tr>
  <tr>
    <td>%</td>
    <td>Relative to the size of the parent element</td>
  </tr>
  <tr>
    <td>fr</td>
    <td>A fractional unit. 1fr equals 1 part of the available space</td>
  </tr>
  <tr>
    <td>ch</td>
    <td>Relative to width of the "0" (zero) character</td>
  </tr>
</table>

Установка размера шрифта с помощью Em

Для em точкой отсчёта служит размер шрифта родительского элемента. Так, 2.5em равно 40px, если у родителя размер шрифта 16px.

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

Пример

Размеры шрифта, заданные в em:

Prompt
Создайте страницу, которая устанавливает базовый размер шрифта в body равным 16px, а затем использует единицы em, чтобы задать h1 значение 2.5em (40px), h2 — 1.875em (30px), а p — 1em (16px). Добавьте примеры заголовков и абзац, чтобы показать размеры.
Output: complete HTML page

Установка размера шрифта с помощью Rem

Для rem точкой отсчёта служит размер шрифта корневого HTML-элемента (<html>).

Значение em следует за размером шрифта родительского элемента, а значение rem всегда ориентируется на элемент <html>, где бы оно ни встречалось в документе. Масштабируемые и адаптивные дизайны от этого сильно выигрывают: измените размер шрифта у <html>, и всё, что задано в единицах rem, будет масштабироваться вместе по всей странице.

Большинство браузеров задают элементу <html> размер шрифта по умолчанию 16px. Поэтому 1rem равен 16px, если ваш CSS не переопределяет это.

Пример

Размеры шрифта, заданные в rem:

Prompt
Создайте страницу, которая устанавливает размер шрифта корневого элемента html равным 16px, а затем использует единицы rem, чтобы задать h1 значение 2.5rem (40px), h2 — 1.875rem (30px), а p — 1rem (16px). Добавьте примеры заголовков и абзац, чтобы показать размеры.
Output: complete HTML page