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