CSS Media Queries

Media queries allow us to adapt the styles of a website to the screen size, device properties, or user preferences. This is a fundamental technique of responsive web design, making it possible for the same website to appear optimally on different devices.

Basic concepts

The syntax of a media query starts with the @media keyword, followed by one or more conditions. If the condition is met, the CSS rules inside will be applied. The most common conditions include min-width and max-width, which refer to the screen width.

The following example shows how we can change the background color if the screen width is less than 600px.

More complex conditions

Logical operators such as and, not, and only can also be used in media queries. For example, we can combine min-width and max-width conditions to target specific ranges. This allows us to precisely define which styles apply on which devices.

Commonly used conditions

Media queries can check more than just width and height. We can use the orientation condition to differentiate portrait and landscape mode, as well as the prefers-color-scheme condition to support dark or light mode.

Condition	Usage
max-width	Apply styles up to a certain width
min-width	Apply styles from a certain width upwards
orientation	Target portrait or landscape devices
prefers-color-scheme	Adapt to dark or light mode preferences

Tips for using media queries

Correct use of media queries is essential for responsive web design. Here are some tips for effective usage:

Apply a mobile-first approach: design for small screens first, then expand for larger sizes.
Use consistent and well-documented breakpoints to make teamwork easier.
Do not forget user preferences, such as supporting dark mode with prefers-color-scheme.