Code Editor
Web Browser
Learn
Media Queries

Range

Specific screen sizes can be targeted by setting multiple width and height media features. min-width and min-height are used to set the minimum width and minimum height, respectively. Conversely, max-width and max-height set the maximum width and maximum height, respectively.

By using multiple widths and heights, a range can be set for a media query.

@media only screen and (min-width: 320px) and (max-width: 480px) { /* ruleset for 320px - 480px */ }

The example above would apply its CSS rules only when the screen size is between 320 pixels and 480 pixels. Notice the use of a second and keyword after the min-width media feature. This allows us to chain two requirements together.

The example above can be written using two separate rules as well:

@media only screen and (min-width: 320px) { /* ruleset for 320px - 479px */ } @media only screen and (min-width: 480px) { /* ruleset for > 480px */ }

The first media query in the example above will apply CSS rules when the size of the screen meets or exceeds 320 pixels. The second media query will apply CSS rules when the size of the screen meets or exceeds 480 pixels, meaning that it will override the CSS rules present in the first media query.

Both examples above are valid, and it is likely that you will see both patterns used when reading another developer's code.

Report a Bug
If you see a bug or any other issue with this page, please report it here.