Media Queries
Syntax
- Media types:
all
,print
,screen
,speech
- Media features:
width
,height
,orientation
- Logical operators:
and
,not
,only
@media print {
/* rulesets */
}
@media screen {
/* rulesets */
}
@media screen, print {
/* rulesets */
}
@media screen and (min-width: 500px) {
/* rulesets */
}
@import 'style.css' print;
@import 'style.css' screen;
@import 'style.css' screen, print;
@import 'style.css' screen and (min-width: 500px);
<link rel="stylesheet" href="style.css" media="print">
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="style.css" media="screen, print">
<link rel="stylesheet" href="style.css" media="screen and (min-width: 500px)">
Examples
h1 {
text-align: center;
}
@media print {
h1 {
text-align: left;
}
}