Adapting at thresholds.
WHAT A MEDIA QUERY DOES
Applies styles conditionally, based on characteristics of the display.
WHAT CAN BE QUERIED
Width and height Orientation Resolution User preferences, such as reduced motion or colour scheme
THAT LAST ONE
Increasingly important, and frequently overlooked.
WHAT A BREAKPOINT IS
A width at which the layout changes.
WHERE TO PLACE THEM
Where the design stops working, not at device sizes.
HOW MANY
As few as the design requires.
WHY
Each one is a state to maintain and test.
WHAT TO PREFER WHERE POSSIBLE
Layout that adapts continuously, without breakpoints.
WHAT MAKES THAT POSSIBLE
Flexible grids, minimum and maximum sizing, and fluid values.
WHAT TO WRITE
Styles for the smallest screen first, then additions at larger widths.
WHY
It avoids overriding, and the base styles serve any device that does not match.
WHAT TO CHECK
Behaviour just above and just below each breakpoint.
WHAT TO RESPECT
The reduced motion preference, which exists for people who experience discomfort.
