What’s the difference between min-width and max-width in media queries?

Understanding min-width and max-width in CSS Media Queries

The min-width and max-width properties in media queries define the conditions under which certain CSS rules are applied, based on the width of the viewport. They are used to create responsive designs that adapt to different screen sizes.

Key Differences Between min-width and max-width

min-width applies styles when the viewport is greater than or equal to a specified width (used in mobile-first design).
max-width applies styles when the viewport is less than or equal to a specified width (used in desktop-first design).
Using min-width allows styles to build up as screens get larger, while max-width works by removing or overriding styles as screens get smaller.
min-width queries are typically written in ascending order, while max-width queries are written in descending order.

Example: min-width vs max-width

In this example, min-width is used to add styles as the viewport expands (mobile-first), while max-width applies styles when the viewport is smaller than the defined width (desktop-first).

Question Loading...

Transformation and Transition

Frameworks

Everything else

What’s the difference between min-width and max-width in media queries?

Understanding min-width and max-width in CSS Media Queries

Key Differences Between min-width and max-width

min-width applies styles when the viewport is greater than or equal to a specified width (used in mobile-first design).
max-width applies styles when the viewport is less than or equal to a specified width (used in desktop-first design).
Using min-width allows styles to build up as screens get larger, while max-width works by removing or overriding styles as screens get smaller.
min-width queries are typically written in ascending order, while max-width queries are written in descending order.

Example: min-width vs max-width

In this example, min-width is used to add styles as the viewport expands (mobile-first), while max-width applies styles when the viewport is smaller than the defined width (desktop-first).