Media Query

Diwa breakpoints align with the core Diwa scale (xs–xl), plus an additional 2xl at 1920 px for ultra-wide AI workspace layouts. Because CSS custom properties cannot be used inside @media queries, reference raw pixel values in CSS and use the JS helpers for JavaScript-side logic.

Example

Each bar represents the viewport width at which that breakpoint activates. Resize the browser to observe layout changes in a responsive app.

Current viewport:—

480px

760px

1000px

1300px

1760px

2xl

1920px

Label	Token	Value	Context
xs	--diwa-breakpoint-xs	480px	Compact portrait — phones
sm	--diwa-breakpoint-sm	760px	Tablet portrait
md	--diwa-breakpoint-md	1000px	Tablet landscape
lg	--diwa-breakpoint-lg	1300px	Desktop
xl	--diwa-breakpoint-xl	1760px	Wide desktop
2xl	--diwa-breakpoint-2xl	1920px	Ultra-wide / 4K

Usage

✓Use a mobile-first approach — start from the smallest breakpoint and layer styles upward with min-width queries.
✓Use breakpoints as the building blocks of responsive layout — let content dictate when the layout needs to change.
✓Comment each raw pixel value in CSS with the corresponding token name for traceability.
✓Test layouts at every breakpoint to ensure the design holds across all device sizes.

Don't

✕Don't use CSS custom properties inside @media queries — they won't resolve at that scope.
✕Don't rely primarily on max-width queries; mobile-first min-width is the preferred pattern.
✕Don't hardcode raw pixel values without a comment linking back to the breakpoint token.
✕Don't add breakpoints arbitrarily — align all new breakpoints against the defined scale.

ℹ

Breakpoint scale: xs (480 px), sm (760 px), md (1000 px), lg (1300 px), xl (1760 px) match the documented Diwa breakpoint values exactly. The 2xl (1920 px) breakpoint is a Diwa-only extension for ultra-wide and 4K AI workspace panels.

Styles

Import JS helpers from the Diwa styles package. Use raw pixel values in CSS and add token comments inline.

// JS — import breakpoint helpers
import {
  breakpoints,
  breakpointXs, breakpointSm, breakpointMd,
  breakpointLg, breakpointXl, breakpoint2xl,
  getMediaQueryMin,
  getMediaQueryMax,
  getMediaQueryMinMax,
} from '@diwacopilot/components/styles';

// Returns '@media (min-width: 1000px)'
const aboveMd = getMediaQueryMin('md');

// Returns '@media (max-width: 479px)'
const belowXs = getMediaQueryMax('xs');

// Returns '@media (min-width: 760px) and (max-width: 999px)'
const smToMd  = getMediaQueryMinMax('sm', 'md');

// With window.matchMedia
const isMobile = window.matchMedia(getMediaQueryMax('sm')).matches;

/* ─── CSS — mobile-first (min-width) ─────────────────────────────────── */
.panel {
  display: grid;
  grid-template-columns: 1fr;               /* default (< 480 px) */
}

@media (min-width: 480px)  { /* --diwa-breakpoint-xs */
  .panel { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) { /* --diwa-breakpoint-md */
  .panel { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1300px) { /* --diwa-breakpoint-lg */
  .panel { grid-template-columns: repeat(4, 1fr); }
}

@use '@diwacopilot/components/styles' as *;

.panel {
  display: grid;
  grid-template-columns: 1fr;

  @media (min-width: $diwa-breakpoint-xs) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: $diwa-breakpoint-md) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (min-width: $diwa-breakpoint-lg) {
    grid-template-columns: repeat(4, 1fr);
  }
}