Главная
Ширина окна: 0 px — сравните с DevTools и таблицей ниже.
1) Tailwind (`sm:` … `2xl:`)
Фон меняется с min-width: пороги из constants/breakpoints.ts → theme.screens.
Блок с утилитами префиксов
- < 480px — rose
sm:480+ — ambermd:768+ — limelg:1200+ — cyanxl:1440+ — violet2xl:1536+ — fuchsia
Минимальные пороги (px): sm 480, md 768, lg 1200, xl 1440, 2xl 1536.
2) SCSS-миксины (`_breakpoints.scss`)
В SFC нужен явный @use '~/assets/style/_breakpoints.scss' as bp; — глобальный index.scss сюда не подмешивается.
.demo-mix-md-only — фон coral только в полосе md (768–1199px), через @include bp.media-only('md'). .demo-mix-xl-from — зелёная обводка от xl (min 90rem), через @include bp.media-from('xl'). 3) useBreakpoints()
Те же числа, что в BREAKPOINT_PX / Tailwind. При ресайзе значения обновляются.
width0
isBelowSmtrue
isSmOnlyfalse
isMdOnlyfalse
isLgOnlyfalse
isXlOnlyfalse
is2xlUpfalse
isSmUpfalse
isMdUpfalse
isLgUpfalse
isXlUpfalse
isMobiletrue
isMobileOrTablettrue
isTabletfalse
isTabletOrLaptopfalse
isLaptopfalse
isLaptopOrSmallDesktopfalse
isSmallDesktopfalse
isSmallDesktopOrDesktopfalse
rem в Tailwind: sm: 30remmd: 48remlg: 75remxl: 90rem2xl: 96rem