Breakpoints

Breakpoints draws the widths the page's media queries switch at, as dashed vertical lines, each labelled with its width and measured from the left edge of the window. It answers "where does this layout change?" without reading the stylesheet.

Each width, and what changes there

The Breakpoints menu lists every width under Resize the window to, with how many rules change there; hover one to see them, those that start applying from that width and those that stop. Choose a width to resize the browser window so the page is exactly that wide. A max-width: 767px rule applies at 767, a min-width: 768px one at 768. Resizing needs no permission. The browser keeps a smallest window width, and a page zoom it cannot see is measured and corrected once; if the window cannot get narrow enough, Nitpique says so, and the responsive canvas goes narrower. A maximised or full screen window is made normal first.

Heights and containers

min-height and max-height queries are drawn as horizontal lines, labelled h 400. Container queries are drawn inside each query container on the page, from the left of its content, labelled @300: the queries that name the container, and the unnamed ones, with em read against the container's own font size.

1. Press B. Or press the Breakpoints button on the toolbar (it may be in the More menu) and choose Breakpoint lines.
2. Widen or narrow the window past a line and watch the page change. Press again to hide the lines.

Nitpique reads min-width and max-width and the range syntax (width >= 48em), in px, em and rem, inside @media and any rule that holds one, such as @supports or @layer. Queries for print, orientation or colour scheme are left out. Lines beyond the window's right or bottom edge are not drawn.