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 */
}
@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 then apply CSS rules when the size of the screen meets or exceeds 480 pixels, meaning that it can override CSS rules present in the first media query or apply additional CSS rules that are not already present in the first.
Both examples above are valid, and it is likely that you will see both patterns used when reading another developer’s code.
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 */
}
@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 then apply CSS rules when the size of the screen meets or exceeds 480 pixels, meaning that it can override CSS rules present in the first media query or apply additional CSS rules that are not already present in the first.
Both examples above are valid, and it is likely that you will see both patterns used when reading another developer’s code.