After specifying the type, you can then target a media feature with a rule.
Width and height
The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the min-width
, max-width
, and width
media features.
These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.
@media screen and (width: 600px) {
body {
color: red;
}
}
Open this example in the browser, or view the source.
The width
(and height
) media features can be used as ranges, and therefore be prefixed with min-
or max-
to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is 600 pixels or narrower, use max-width
:
@media screen and (max-width: 600px) {
body {
color: blue;
}
}
Open this example in the browser, or view the source.
In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width
or height
used alone.
There are many other media features that you can test for, although some of the newer features introduced in Levels 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a complete list at Using Media Queries: Syntax.
Orientation
One well-supported media feature is orientation
, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
Open this example in the browser, or view the source.
A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimized for devices in portrait mode.
Use of pointing devices
As part of the Level 4 specification, the hover
media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.
@media (hover: hover) {
body {
color: rebeccapurple;
}
}
Open this example in the browser, or view the source.
If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.
Also in Level 4 is the pointer
media feature. This takes three possible values, none
, fine
and coarse
. A fine
pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A coarse
pointer is your finger on a touchscreen. The value none
means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.
Using pointer
can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.
Using ranged syntax
One common case is to check if the viewport width is between two values:
@media (min-width: 30em) and (max-width: 50em) {
}
If you want to improve the readability of this, you can use "range" syntax:
@media (30em <= width <= 50em) {
}
So in this case, styles are applied when the viewport width is between 30em
and 50em
.