HTML and CSS Reference
In-Depth Information
Add media queries right into your CSS
There's another way to target your CSS to devices with specific properties: rather
than using media queries in link tags, you can also use them right in your CSS.
Here's an example:
Use
the @
med
ia rul
e…
And then put a
ll the rules tha
t
apply to device
s matching this
query within cu
rly braces.
@media screen and (min-device-width: 481px) {
#guarantee {
margin-right: 250px;
}
}
@media screen and (max-device-width: 480px) {
#guarantee {
margin-right: 30px;
}
}
@media print {
body {
font-family: Times, "Times New Roman", serif;
}
}
…
these rules will
be used if the
screen is 480px
or less…
p.specials {
color: red;
}
So, the way this works, only the CSS rules that are specific to a media type are included in
an
@media
rule. All the rules that are common to all the media types are included in the
CSS file below the
@media
rules, so that way you don't have any unnecessarily repeated
rules. And, when a browser loads the page, it determines through the media queries the
rules that are appropriate for the page, and ignores any that don't match.
Media queries are an area of active
development by the standards groups,
so keep your eyes on evolving best
practices for targeting devices.