HTML — БАЗОВЫЙ КОРНЕВОЙ МАСШТАБ (1rem)

Ghj,f ltcrrhbgnjhf Проба дескриптора

Выбор параметров fluid typography для корневого элемента <html> с использованием формулы font-size: clamp(...) в адаптивной вёрстке.

Абсолютные и Относительные единицы измерения в CSS
Управление корневым font-size в адаптивной вёрстке
Шаблон Заполнения

Абсолютные и Относительные единицы измерения в CSS

В CSS, единицы измерения делятся на две большие группы:
Абсолютные (absolute length units) и Относительные (relative length units)

Абсолютные единицы измерения в CSS

Абсолютные единицы измерения (АЕИ) в CSS не зависят от CSS-контекста и стилевых правил, имеют фиксированно определённый размер и используются браузером, как фиксированная система отсчёта при вычислении линейных размеров элементов.

Примеры АЕИ: cm, mm, in, pt, pc, px.

Относительные единицы измерения в CSS

Относительные единицы измерения (ОЕИ) в CSS зависимы от CSS-контекста: стилевых правил родительских элементов или размеров окна просмотра (viewport). Вычисляемый размер ОЕИ определяется текущими условиями отображения документа и используется браузером для последующего приведения относительных линейных размеров к фиксированной системе отсчёта в абсолютных единицах измерения.

Примеры ОЕИ в CSS и контекст их зависимости:

em — относительно размера шрифта текущего элемента
rem — относительно размера шрифта корневого элемента <html>
% — относительно соответствующего размера родительского элемента (ширины, высоты, отступов и др.)
vw, vh — относительно ширины и высоты окна просмотра (viewport)
vmin, vmax — относительно меньшей или большей стороны viewport
ch, ex — относительно размеров символов текущего шрифта

rem (root em) — основа адаптивной верстки

Основой для построения адаптивных интерфейсов являются размер корневого шрифта документа и rem (root em) — относительная единица линейных измерений в CSS, числовое значение которой определяется браузером на основе размера шрифта корневого элемента <html>.

Размер шрифта, заданный элементу <html>, всегда принимается браузером за базовую величину единицы измерения 1rem.

html { font-size: 20px; }

/* HTML — БАЗОВЫЙ КОРНЕВОЙ МАСШТАБ (1rem)

1. font-size в html задаёт значение 1rem = 20px.
2. Все размеры интерфейса задаются в rem.
3. Браузер автоматически переводит rem в px:

1rem × 20px = 20px
2rem × 20px = 40px
0.5rem × 20px = 10px */

В результате вычислений, все значения CSS, заданные в rem, браузер пересчитывает в итоговые размеры элементов интерфейса в px для вывода на экран.

html base font-size
(корневой размер шрифта)
              ↓
            1rem
     (базовая rem-величина)
              ↓
rem-значения размеров элементов
       (размеры в CSS)
              ↓
    browser calculations
   (вычисления браузера)
              ↓
px-значения размеров элементов
      (итоговые размеры)
              ↓
            render
      (вывод на экран)

Изменяя размер шрифта (font-size) корневого элемента <html>, мы изменяем базовую величину 1rem, а вместе с ней — и все размеры элементов интерфейса, заданные в rem.

Управление корневым `font-size` в адаптивной вёрстке

фиксированное значение font-size
относительные и процентные единицы измерения
адаптивное изменение через медиазапросы (@media)
текучая типографика (fluid typography) с использованием функций clamp(), min(), max() и viewport-единиц vw

В данной статье будет произведён расчёт оптимальной формулы изменения корневого font-size элемента <html> на основе принципов fluid typography — современного способа адаптивного масштабирования интерфейса.

В CSS, корневой <code>font-size</code> выступает точкой запуска механизма вычисления размеров элементов интерфейса.