``` ## Detection - **ID:** `breakpoint-coverage` - **Severity:** `medium` - **What to look for:** Check for media query breakpoints targeting phone-sized viewports (<=640px) and tablet-sized viewports (<=1024px). In Tailwind, look for `sm:`, `md:`, `lg:` responsive prefixes on layout-affecting classes. In plain CSS, look for `@media` rules at or near 640px and 1024px thresholds. - **Pass criteria:** Count all distinct breakpoint values used in the project (media queries and Tailwind responsive prefixes). The project must use breakpoints targeting at least 2 viewport ranges: phone (<=640px or Tailwind `sm:`) and tablet (<=1024px or Tailwind `md:`/`lg:`). Report even on pass: "Breakpoints found: [list each breakpoint value and count of usages, e.g., 'sm: (23 usages), md: (15 usages), lg: (8 usages)']." - **Fail criteria:** Fewer than 2 viewport ranges covered — no breakpoints at the phone size range, or breakpoints exist only for tablet and not phone. - **Skip (N/A) when:** Never. - **Detail on fail:** `"Only 1 of 2 required viewport ranges covered — no media queries or Tailwind sm: prefixes found for phone-sized breakpoints"`. - **Remediation:** Two breakpoints cover the essential range: ```css @media (max-width: 640px) { /* phone */ } @media (min-width: 641px) and (max-width: 1024px) { /* tablet */ } ``` In Tailwind (mobile-first — no prefix = mobile base): ```html

``` --- Taxons: user-experience HTML version: https://auditbuffet.com/patterns/ab-001922