Media features describe the specific characteristics of a given user agent, output device, or environment.
For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions.
This example applies styles when the user’s primary input mechanism (such as a mouse) can hover over elements:
@media
(
hover
:
hover)
{
}
Many media features are range features, which means they can be prefixed with “min-” or “max-” to express “minimum condition” or “maximum condition” constraints.
For example, this CSS will apply styles only if your browser’s viewport width is equal to or narrower than 1250px:
@media
(
max-width
:
1250px)
{
}
If you create a media feature query without specifying a value, the nested styles will be used as long as the feature’s value is not zero (or none, in Level 4).
For example, this CSS will apply to any device with a color screen:
@media
(
color)
{
}
If a feature doesn’t apply to the device on which the browser is running, expressions involving that media feature are always false.
For more Media feature examples, please see the reference page for each specific feature.
