Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Ядро адаптивности/ Viewport-relative units

  1. Базовый уровень

    • Viewport width units

      Связывает `vw` с одним процентом width reference viewport.

    • Viewport height units

      Связывает `vh` с одним процентом height reference viewport.

    • Viewport minimum-dimension units

      Вычисляет `vmin` по меньшей из viewport dimensions.

    • Viewport maximum-dimension units

      Вычисляет `vmax` по большей из viewport dimensions.

  2. Продвинутый уровень

    • Logical viewport-axis units

      Разрешает `vi` и `vb` через inline/block axes соответствующего writing mode.

    • Default и large viewport units

      Связывает unprefixed `v*` и `lv*` с large viewport size.

    • Small viewport units

      Использует `sv*` относительно viewport с раскрытыми retractable UA interfaces.

    • Dynamic viewport units

      Использует `dv*` относительно текущего dynamic viewport size.

  3. Экспертный уровень

    • Стабильность viewport variants

      Различает стабильность `sv*`/`lv*` и потенциальную relayout-изменчивость `dv*`.

    • Категории динамических UA interfaces

      Определяет, какие изменения UA interfaces меняют все viewport sizes, образуют разницу small/large либо overlay content.

    • Scrollbar reduction viewport units

      Учитывает сокращение viewport-percentage lengths при безусловных root scrollbars или reserved gutter.

    • Scrollbar reference в media queries

      Отличает sizing viewport units внутри media query от scrollbar-adjusted initial containing block.

    • Обновление dynamic viewport при движении UI

      Учитывает разрешённую UA дискретность пересчёта dynamic units во время анимации browser chrome.

    • Body overflow и размер viewport units

      Отличает влияние propagated body overflow на viewport scrolling от отсутствия влияния самого body value на размер viewport units.