Mobile-First Breakpoint Cascade Simulator

Viewport

Viewport width 375px

Media-Query Strategy

Network

Breakpoint Density

Layers defined 5

Live Readouts

Render-blocking CSS

— KB

Time to first render

— ms

Matched cascade layers

—

How it works

A stylesheet is split into breakpoint layers — a base layer plus one @media block per breakpoint. The two classic strategies handle them differently:

Mobile-first (min-width):
  base { ... }
  @media (min-width: 480px)  { ... }  /* adds, never overrides down */
  @media (min-width: 768px)  { ... }
  → layers with bp ≤ viewport are matched AND cumulative;
    only those bytes need to block first paint — the rest
    can be deferred/async since they can't apply yet.

Desktop-first (max-width):
  desktop { ... }
  @media (max-width: 1024px) { ... }  /* overrides down */
  @media (max-width: 768px)  { ... }
  → the browser can't know in advance which override wins,
    so the whole monolithic bundle must download and parse
    before first paint, on every device.

Time-to-first-render uses the standard latency + transfer model:

T = RTT + (blocking_KB × 8 / throughput_kbps) × 1000  [ms]

The packet stream in the 3D view is paced by the bandwidth-delay product (BDP = throughput × RTT), the real networking quantity that sets how many bytes can be "in flight" over the connection at once — a fast, high-latency link (satellite) queues far more in-flight data than a slow, low-latency one.

Viewport slider — moves the marker plane up the breakpoint tower; layers at or below it are matched.
Mobile-First / Desktop-First — toggles which layers count as render-blocking (bright/opaque) vs deferred (dim) in the tower.
Network — sets throughput and RTT used in the timing formula and packet speed.
Breakpoint density — how many @media layers the stylesheet defines (3–6), each with its own realistic KB weight.

Real-world relevance: this is why Google's mobile-first indexing and Core Web Vitals (LCP) reward mobile-first, min-width stylesheets — constrained mobile connections pay only for the CSS that can actually apply at their width.

Matched / blocking layer Deferred / unmatched layer Data packet in flight

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.