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