Media Query

Query based on viewport/device features.

html

<div class="mq-wrap" role="img" aria-label="A row of chips that stack vertically below the breakpoint and lay out horizontally at or above it, like a media query switching layout by width">
  <div class="mq-frame" style="width:320px;--bp:480px;">
    <div class="mq-row">
      <div class="mq-chip" style="background:#F5C2E0;">One</div>
      <div class="mq-chip" style="background:#F5C2E0;">Two</div>
      <div class="mq-chip" style="background:#F5C2E0;">Three</div>
    </div>
  </div>
  <p class="mq-caption">viewport 320px &middot; @media (min-width: 480px) switches the row from stacked to inline</p>
</div>
<style>
.mq-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; }
.mq-frame { container-type: inline-size; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; box-sizing: border-box; background: #FAF7F2; }
.mq-row { display: flex; flex-direction: column; gap: 8px; }
.mq-chip { border-radius: 6px; padding: 10px; text-align: center; font-weight: 700; }
@container (min-width: 480px) { .mq-row { flex-direction: row; } }
.mq-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; width: 320px; }
</style>

tailwind

<div class="mq-tw font-sans text-[#241430]" role="img" aria-label="A row of chips that stack vertically below the breakpoint and lay out horizontally at or above it, like a media query switching layout by width">
  <div class="mq-tw-frame border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 box-border bg-[#FAF7F2]" style="width:320px;container-type:inline-size;">
    <div class="mq-tw-row flex flex-col gap-2">
      <div class="rounded-md p-2.5 text-center font-bold" style="background:#F5C2E0;">One</div>
      <div class="rounded-md p-2.5 text-center font-bold" style="background:#F5C2E0;">Two</div>
      <div class="rounded-md p-2.5 text-center font-bold" style="background:#F5C2E0;">Three</div>
    </div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80 w-[320px]">viewport 320px &middot; @media (min-width: 480px) switches the row from stacked to inline</p>
</div>
<style>
@container (min-width: 480px) { .mq-tw-row { flex-direction: row; } }
</style>

react

export function MediaQueryDemo({
  viewportWidth = "320px",
  breakpoint = 480,
  accent = "#F5C2E0",
}) {
  const chip = { background: accent, borderRadius: 6, padding: 10, textAlign: "center", fontWeight: 700 };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430" }}
      role="img" aria-label="A row of chips that stack vertically below the breakpoint and lay out horizontally at or above it, like a media query switching layout by width">
      <style>{`@container mq (min-width: ${breakpoint}px) { .mq-row { flex-direction: row; } }`}</style>
      <div style={{ containerType: "inline-size", containerName: "mq", width: viewportWidth, border: "1.5px dashed #24143055",
        borderRadius: 8, padding: 12, boxSizing: "border-box", background: "#FAF7F2" }}>
        <div className="mq-row" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={chip}>One</div><div style={chip}>Two</div><div style={chip}>Three</div>
        </div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc", width: 320 }}>
        viewport {viewportWidth} &middot; @media (min-width: {breakpoint}px) switches the row from stacked to inline
      </p>
    </div>
  );
}