Responsive design and media queries

The relevant viewport

The width=device-width, initial-scale=1 declaration helps a mobile browser use a layout viewport consistent with device width in CSS pixels. It does not turn CSS pixels into physical pixels or fix excessive fixed content width. The excerpt does not prevent zoom.

Adding user-scalable=no to retain a visual arrangement can remove a necessary reading tool and does not fix the constraints making the page too wide.

Conditions and inclusive boundaries

Min-width: 600px matches when the viewport is exactly 600 CSS px wide and when it is wider. The condition decides whether rules enter the cascade; it does not give them more specificity. At 1000px, both example queries match.

With selectors and other criteria tied, the final declaration determines three columns. If you reverse these rules, a narrower condition can override the wider one; there is no implicit else-if.

Combine conditions intentionally

And requires combined conditions to be true; a comma-separated list matches if any query in the list matches. The expression screen and (min-width: 600px) requires the screen media type and that width. Orientation describes the relationship between viewport dimensions; it neither guarantees enough space for a component nor identifies hardware.

Before adding more conditions, explain which concrete constraint each one protects.

Content-driven breakpoints

The 600 and 900 values are example hypotheses. In a real product, observe when headings, filters and actions stop fitting without overlap or lost meaning. Consider translations and zoom because a longer label can require another arrangement on the same device.

A simple single-column base reduces assumptions, while more columns can be added when enough space is available. Flexibility and min/max constraints also help; a media query is not mandatory for every adaptation.

Units and proportions

Rem refers to root font size. Em applied to font-size uses the parent’s font size; em in padding uses the element’s own font size. With a 20px root and a child using font-size: 1rem, padding: 1em equals 20px even if the parent has 30px.

For an image, max-width: 100% and height: auto can constrain width to the container while retaining ratio under the example’s conditions. An additional fixed height can defeat that intention.

The slot is not the file

For srcset candidates with w descriptors, each number identifies intrinsic file width. Sizes indicates the expected slot under different conditions; it does not by itself define visual width. If the image occupies 300px but sizes declares 100vw in a 1200px viewport, the hint overstates need and can lead to a larger resource.

The browser also considers density and other conditions. The diagnosis therefore identifies an inconsistent hint without promising an exact file for every browser.

Reflow without losing information

The reflow criterion explains why vertically scrolled text should adapt to a width equivalent to 320 CSS px without requiring horizontal scrolling for every line. Bounded exceptions exist for parts needing two dimensions, such as some tables and maps; that does not justify keeping every paragraph at a fixed width.

A table can have its own scrolling region while prose reflows. Hiding the scrollbar with overflow: hidden may merely hide content without meeting the aim of preserving information and functionality.

Common pitfalls

Confusing CSS px with physical pixels; treating media queries as else-if; thinking sizes defines width; hiding overflow to appear responsive; blocking zoom; assuming landscape means sufficient room; choosing a breakpoint without observing both translations.