media.css

@media print {
  .class {
    color: blue;
  }
  .class .sub {
    width: 42;
  }
  .top,
  header > h1 {
    color: #444444;
  }
}
@media screen {
  .body {
    max-width: 480;
  }
}
@media all and (device-aspect-ratio: 16 / 9) {
  .body {
    max-width: 800px;
  }
}
@media all and (orientation: portrait) {
  aside {
    float: none;
  }
}
@media handheld and (min-width: 42), screen and (min-width: 20em) {
  .body {
    max-width: 480px;
  }
}
@media print {
  .body {
    padding: 20px;
  }
  .body header {
    background-color: red;
  }
}
@media print and (orientation: landscape) {
  .body {
    margin-left: 20px;
  }
}
@media screen {
  .sidebar {
    width: 300px;
  }
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}
@media a and b {
  .first .second .third {
    width: 300px;
  }
  .first .second .fourth {
    width: 3;
  }
}
@media a and b and c {
  .first .second .third {
    width: 500px;
  }
}
@media a, b and c {
  .body {
    width: 95%;
  }
}
@media a and x, b and c and x, a and y, b and c and y {
  .body {
    width: 100%;
  }
}
.a {
  background: black;
}
@media handheld {
  .a {
    background: white;
  }
}
@media handheld and (max-width: 100px) {
  .a {
    background: red;
  }
}
.b {
  background: black;
}
@media handheld {
  .b {
    background: white;
  }
}
@media handheld and (max-width: 200px) {
  .b {
    background: red;
  }
}
@media only screen and (max-width: 200px) {
  .body {
    width: 480px;
  }
}
@media print {
  @page :left {
    margin: 0.5cm;
  }
  @page :right {
    margin: 0.5cm;
  }
  @page Test:first {
    margin: 1cm;
  }
  @page :first {
    size: 8.5in 11in;
    @top-left {
      margin: 1cm;
    }
    @top-left-corner {
      margin: 1cm;
    }
    @top-center {
      margin: 1cm;
    }
    @top-right {
      margin: 1cm;
    }
    @top-right-corner {
      margin: 1cm;
    }
    @bottom-left {
      margin: 1cm;
    }
    @bottom-left-corner {
      margin: 1cm;
    }
    @bottom-center {
      margin: 1cm;
    }
    @bottom-right {
      margin: 1cm;
    }
    @bottom-right-corner {
      margin: 1cm;
    }
    @left-top {
      margin: 1cm;
    }
    @left-middle {
      margin: 1cm;
    }
    @left-bottom {
      margin: 1cm;
    }
    @right-top {
      margin: 1cm;
    }
    @right-middle {
      content: "Page " counter(page);
    }
    @right-bottom {
      margin: 1cm;
    }
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
  .b {
    background: red;
  }
}
.body {
  background: red;
}
@media (max-width: 500px) {
  .body {
    background: green;
  }
}
@media (max-width: 1000px) {
  .body {
    background: red;
    background: blue;
  }
}
@media (max-width: 1000px) and (max-width: 500px) {
  .body {
    background: green;
  }
}
@media (max-width: 1200px) {
  /* a comment */
}
@media (max-width: 1200px) and (max-width: 900px) {
  .body {
    font-size: 11px;
  }
}
@media (min-width: 480px) {
  .nav-justified > li {
    display: table-cell;
  }
}
@media (min-width: 768px) and (min-width: 480px) {
  .menu > li {
    display: table-cell;
  }
}
@media all and tv {
  .all-and-tv-variables {
    var: all-and-tv;
  }
}
@media screen and (min-width: 61px) {
  .selector {
    foo: bar;
  }
}