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