Урок 13. Примеры: Единицы измерения в CSS

Рабочие примеры

В каждом примере сверху — реальный результат, ниже — код. Сравнивай вживую.

1. px — фиксированная ширина брусков

В px ширина не зависит ни от чего: 100px и 200px всегда такие, какими заданы.

.bar-1 { width: 100px; }
.bar-2 { width: 200px; }
.bar-3 { width: 300px; }

2. % — доля от родителя

Родитель шириной 320px (пунктир). Проценты считаются от него: 25%, 50%, 100%.

.parent { width: 320px; }   /* контекст для % */
.bar-1  { width: 25%; }     /* = 80px  */
.bar-2  { width: 50%; }     /* = 160px */
.bar-3  { width: 100%; }    /* = 320px */

3. rem vs px для ширины — при базовом шрифте 16px совпадают

10rem = 10 × 16px = 160px. Разница проявится, если поменять корневой шрифт — rem подстроится, px нет.

/* при font-size корня = 16px обе полоски = 160px */
.fixed    { width: 160px; }   /* не реагирует на зум шрифта */
.relative { width: 10rem; }   /* вырастет, если вырастет корневой шрифт */

4. em vs rem для шрифта внутри вложенности

Родитель имеет font-size: 20px. em считается от него (1.5em = 30px), а rem — от корня страницы (1.5rem = 24px). Видно разный размер текста.

.parent   { font-size: 20px; }
.child-em  { font-size: 1.5em; }   /* 1.5 × 20 = 30px */
.child-rem { font-size: 1.5rem; }  /* 1.5 × 16 = 24px */

5. ch + clamp() — читаемый адаптивный текст

max-width: 70ch держит строку комфортной, а clamp() плавно меняет размер заголовка.

.article { max-width: 70ch; margin: 0 auto; }
.article h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
}