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;
}
}