Find website breakpoints

Q: What does the ≥ or ≤ in a label mean?

≥ marks a min-width query, whose styles apply at that width and wider. ≤ marks a max-width query, whose styles apply at that width and narrower. A label without a symbol means the page uses that width in both kinds of query.

See every width at which a site's layout changes. Screen Ruler reads the page's media queries and marks each breakpoint on the page with a labeled line.

What it does

Responsive sites change their layout at set widths, defined in CSS media queries such as @media (min-width: 768px). Breakpoints finds those widths for you. It reads the stylesheets of the page you are on and draws a vertical line at each breakpoint, with a label showing the width.

The lines are colored by the kind of query:

Green, labeled with ≥: a min-width breakpoint, for mobile first CSS. Styles apply at that width and wider.
Blue, labeled with ≤: a max-width breakpoint, for desktop first CSS. Styles apply at that width and narrower.
Amber, no symbol: a width the page uses both ways.

So instead of dragging the window edge and watching for the layout to jump, you see the full list of widths the site was designed around.

How to find a site's breakpoints

Open the site and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
Press 5, or click Breakpoints in the control bar.
Read the labels near the top of the window. Each line sits at its breakpoint width, measured from the left edge of the window.

Breakpoints wider than your window fall off the right edge. To see them, widen the window or use Responsive Mode, below.

See every breakpoint at once in Responsive Mode

In Responsive Mode, the same Breakpoints button does more. Turn it on and Screen Ruler replaces your viewports with one frame per breakpoint the page declares, so every layout the CSS defines is on screen side by side. Each frame keeps the height of your nearest existing viewport, or 800 pixels if none is close. Turn it off and your own viewports come back as they were.

How detection works

Screen Ruler goes through every stylesheet it can read and picks out the min-width and max-width values of each media query. It handles the details that trip up a quick search through the CSS:

em and rem units are converted to pixels at 16 pixels each, the way browsers evaluate them in media queries regardless of the page's root font size. So 48em shows as 768px.
Fractional values land on the width where the query actually applies. A max-width: 767.98px query is shown at 767, and a min-width is rounded up.
Duplicates are merged. A site with fifty media queries at 768 pixels shows one line.
Web components are covered: stylesheets inside open shadow roots and stylesheets added from JavaScript are read as well as the page's own.

The setting is remembered, so if Breakpoints was on when you closed Screen Ruler it is on again next time you start it.

What it cannot detect

Locked stylesheets. Browsers block reading CSS from another domain unless the server allows it. Rules in those files are skipped, so a site that serves its CSS from a separate domain can show fewer breakpoints than it has.
Other kinds of query. Only width queries written as min-width or max-width in px, em or rem are detected. The newer range syntax, such as (width >= 768px), height queries and container queries are not shown.
Breakpoints in JavaScript. Layout changes triggered by scripts rather than CSS are invisible to a stylesheet scan.

When it is useful

Testing at the right sizes. Check a site at each of its real breakpoints, and a few pixels either side, instead of at guessed device widths.
Learning from other sites. See which breakpoints a well built site uses before you choose your own.
Auditing a codebase. Spot near duplicate breakpoints such as 767, 768 and 770 that should be one value.
Design handoff. Confirm that the breakpoints in the build match the frames in the design file, then check alignment at each one with the Layout Grid Overlay.

For a wider look at testing tools, see the best responsive design testing extensions. Breakpoints is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card required.

Common questions

How do I find a website's breakpoints in Chrome DevTools?

In DevTools, turn on the device toolbar and choose Show media queries from its menu. That shows bars for the queries above the viewport. Screen Ruler lists the same kind of breakpoints with one key press, marks them on the page itself, and can open the page at every breakpoint at once in Responsive Mode.

What does the ≥ or ≤ in a label mean?

≥ marks a min-width query, whose styles apply at that width and wider. ≤ marks a max-width query, whose styles apply at that width and narrower. A label without a symbol means the page uses that width in both kinds of query.

Why are some breakpoints missing?

Usually because the stylesheet comes from another domain and the browser does not let extensions read it. Breakpoints written with range syntax such as (width >= 768px), container queries and breakpoints handled in JavaScript are also not detected.

Does it convert em breakpoints to pixels?

Yes. em and rem values in media queries are converted at 16 pixels each, which is how browsers evaluate them, so 48em is shown as 768px.