Пресеты
Импортируйте из responsive-media/presets либо из основной точки входа.
ResponsiveConfig (по умолчанию)
| Ключ | Диапазон |
|---|---|
mobile | ≤ 600px |
tablet | 601 – 960px |
desktop | ≥ 961px |
TailwindPreset + TailwindOrder
Взаимоисключающие брейкпоинты Tailwind CSS v3/v4:
| Ключ | Диапазон |
|---|---|
xs | ≤ 639px |
sm | 640 – 767px |
md | 768 – 1023px |
lg | 1024 – 1279px |
xl | 1280 – 1535px |
2xl | ≥ 1536px |
ts
import { createResponsiveState, TailwindPreset, TailwindOrder } from 'responsive-media'
const state = createResponsiveState(TailwindPreset, { order: [...TailwindOrder] })BootstrapPreset + BootstrapOrder
Взаимоисключающие брейкпоинты Bootstrap 5:
| Ключ | Диапазон |
|---|---|
xs | ≤ 575px |
sm | 576 – 767px |
md | 768 – 991px |
lg | 992 – 1199px |
xl | 1200 – 1399px |
xxl | ≥ 1400px |
ts
import { createResponsiveState, BootstrapPreset, BootstrapOrder } from 'responsive-media'
const state = createResponsiveState(BootstrapPreset, { order: [...BootstrapOrder] })AccessibilityPreset
Медиа-запросы пользовательских предпочтений. Несколько ключей могут быть true одновременно.
| Ключ | Совпадает, когда … |
|---|---|
dark | prefers-color-scheme: dark |
light | prefers-color-scheme: light |
reducedMotion | prefers-reduced-motion: reduce |
highContrast | prefers-contrast: more |
lowContrast | prefers-contrast: less |
noHover | hover: none (сенсорные устройства / стилус) |
coarsePointer | pointer: coarse (ввод пальцем) |
forcedColors | forced-colors: active (Windows HCM) |
print | тип медиа print |
ts
import { createResponsiveState, AccessibilityPreset } from 'responsive-media'
const a11y = createResponsiveState(AccessibilityPreset)
a11y.onEnter('dark', () => applyDarkTheme())
a11y.onEnter('reducedMotion', () => disableAnimations())
a11y.onEnter('print', () => hideNonPrintable())