At-Rule

Overview

This section contains CSS that's shared by most experiments on this page.

Shared CSS

Media Queries

See this MDN Developer Guide CSS media queries.

The device widths used in this lab were chosen for convenience. They are set to: 400, 800, 1200 and 1600 pixels.

max-width

Defines a maximum width for the view (e.g., browser window). As long as the view's width is below this value, the query resolves to true and its rules are applied. Once it exceeds this value, the query resolves to false and its rules are no longer applied.

The query evaluates to true as long as the view-width is less than or equal to the specified max-width.

min-width

Defines a minimum width for the view (e.g., browser window). As long as the view's width is above this value, the query resolves to true and its rules are applied. Once it falls below this value, the query resolves to false and its rules are no longer applied.

The query evaluates to true as long as the view-width is greater than or equal to the specified min-width.

Logical Operator (and)

The and operator enables a bracket to be defined using multiple queries (e.g., a min and max value can be applied at the same time to define a range). This experiment defines a series of breakpoints, so only one breakpoint resolves to true for a particular range of view widths.

Highlight a particular element only while the view width is in range.

Hide and Show

Same as previous experiment, but now the rules have been changed to hide and show elements based on view size.

Responsive Images

Not really an at rule, so this is likely to be moved soon (or this lab might get renamed). This experiment enables the browser to scale the image as the view size changes.