Адаптивные размеры
Адаптивный размер — величина с двумя значениями: для мобильного и для настольного режима. Она переключается сама, поэтому компоненту не нужны свои медиазапросы для размеров.
Два режима
У Framework два режима экрана: мобильный и настольный. Граница —
ширина окна 60rem, та же, что у префикса lg (см. Ширина экрана: контрольные точки). Режим меняется
ровно один раз; промежуточных значений нет.
Адаптивная ступень хранит пару значений: для мобильного и для настольного режима. Компонент берёт переменную роли, а переключением занимается сама переменная:
.project-control {
min-block-size: var(--sf-ui-1--control-height);
}
При смене режима токен меняет значение, а правило компонента остаётся прежним.
- Нельзя заводить в компоненте своё правило
@mediaдля размера: компонент разойдётся с соседними на границе режимов.
Что меняется
| Семейство | Ступень | Мобильный | Настольный |
|---|---|---|---|
| Кегль | --sf-text--size-1 |
14 px | 16 px |
| Высота строки | --sf-text--height-1 |
20 px | 24 px |
| Интервал | --sf-space-1 |
12 px | 16 px |
| Интервал | --sf-space-4 |
24 px | 32 px |
| Высота контрола | --sf-ui-1--control-height |
36 px | 40 px |
| Радиус | --sf-radius-3 |
16 px | 24 px |
Мелкие ступени часто одинаковы в обоих режимах (--sf-space-1/4 = 4 px,
--sf-text--size-1/3 = 12 px), а крупные расходятся сильнее. Заголовок на
телефоне должен быть меньше, а подпись у контрола и так на пределе
читаемости.
Полные пары всех ступеней — в справочнике «Значения вертикальных размеров»; ступени интервалов — в «Значениях интервалов».
Вертикальный контракт
Значения для текста, интервалов и высоты контролов записаны в одном
машиночитаемом контракте simai.vertical-sizing
(src/core/contracts/adaptive-sizing.v1.json в исходниках Framework). Из него
сборка генерирует переменные, а проверка npm run adaptive-sizing:check
следит, чтобы сгенерированное совпадало с контрактом.
- Нельзя править сгенерированные файлы руками: правка вносится в контракт.
В контракт входят:
- правило корневого кегля (браузерный
remне меняется между режимами); - граница режимов;
- кегль и высота строки;
- высота контрола и его вертикальный отступ;
- вертикальные интервалы и ритм.
В контракт не входят и между разными компонентами не выравниваются:
- отступ вложенного уровня меню;
- горизонтальные внутренние отступы;
- ширина контейнера и поля страницы.
Эти величины тоже берутся из шкал, но совпадать у разных компонентов не обязаны. Где совпадение нужно (поле и его список), его требует стандарт геометрии (Геометрия: стандарт и проверка), а не этот контракт.
Иконки: две шкалы
У иконок две шкалы, и какая работает, зависит от места:
- Отдельная иконка берёт фиксированную лестницу
--sf-icon-size-*. Она не меняется с режимом. - Иконка внутри контрола берёт высоту строки этого контрола (Части компонента — тоже со ступени). Она уменьшается вместе с текстом на узком экране. Правило и пример — в Размеры иконок.
Фиксированная лестница иконок совпадает с настольными значениями шкалы
кегля (--sf-icon-size-1 — 16 px, как --sf-text--size-1). Иконка внутри
контрола равна высоте строки и поэтому крупнее отдельной иконки той же ступени:
в контроле размера 1 на широком экране это 24 px.
Смотрите также
- Одна лестница размеров — высота контрола по ступеням.
- Геометрия: стандарт и проверка — стандарт геометрии.
- Ширина экрана: контрольные точки — префиксы ширины экрана.
- Значения вертикальных размеров — пары mobile и desktop всех ступеней.