Media Queries

Syntax


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

References