media.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. @media print {
  2. .class {
  3. color: blue;
  4. }
  5. .class .sub {
  6. width: 42;
  7. }
  8. .top,
  9. header > h1 {
  10. color: #444444;
  11. }
  12. }
  13. @media screen {
  14. body {
  15. max-width: 480;
  16. }
  17. }
  18. @media all and (device-aspect-ratio: 16 / 9) {
  19. body {
  20. max-width: 800px;
  21. }
  22. }
  23. @media all and (orientation: portrait) {
  24. aside {
  25. float: none;
  26. }
  27. }
  28. @media handheld and (min-width: 42), screen and (min-width: 20em) {
  29. body {
  30. max-width: 480px;
  31. }
  32. }
  33. @media print {
  34. body {
  35. padding: 20px;
  36. }
  37. body header {
  38. background-color: red;
  39. }
  40. }
  41. @media print and (orientation: landscape) {
  42. body {
  43. margin-left: 20px;
  44. }
  45. }
  46. @media screen {
  47. .sidebar {
  48. width: 300px;
  49. }
  50. }
  51. @media screen and (orientation: landscape) {
  52. .sidebar {
  53. width: 500px;
  54. }
  55. }
  56. @media a and b {
  57. .first .second .third {
  58. width: 300px;
  59. }
  60. .first .second .fourth {
  61. width: 3;
  62. }
  63. }
  64. @media a and b and c {
  65. .first .second .third {
  66. width: 500px;
  67. }
  68. }
  69. @media a, b and c {
  70. body {
  71. width: 95%;
  72. }
  73. }
  74. @media a and x, b and c and x, a and y, b and c and y {
  75. body {
  76. width: 100%;
  77. }
  78. }
  79. .a {
  80. background: black;
  81. }
  82. @media handheld {
  83. .a {
  84. background: white;
  85. }
  86. }
  87. @media handheld and (max-width: 100px) {
  88. .a {
  89. background: red;
  90. }
  91. }
  92. .b {
  93. background: black;
  94. }
  95. @media handheld {
  96. .b {
  97. background: white;
  98. }
  99. }
  100. @media handheld and (max-width: 200px) {
  101. .b {
  102. background: red;
  103. }
  104. }
  105. @media only screen and (max-width: 200px) {
  106. body {
  107. width: 480px;
  108. }
  109. }
  110. @media print {
  111. @page :left {
  112. margin: 0.5cm;
  113. }
  114. @page :right {
  115. margin: 0.5cm;
  116. }
  117. @page Test:first {
  118. margin: 1cm;
  119. }
  120. @page :first {
  121. size: 8.5in 11in;
  122. @top-left {
  123. margin: 1cm;
  124. }
  125. @top-left-corner {
  126. margin: 1cm;
  127. }
  128. @top-center {
  129. margin: 1cm;
  130. }
  131. @top-right {
  132. margin: 1cm;
  133. }
  134. @top-right-corner {
  135. margin: 1cm;
  136. }
  137. @bottom-left {
  138. margin: 1cm;
  139. }
  140. @bottom-left-corner {
  141. margin: 1cm;
  142. }
  143. @bottom-center {
  144. margin: 1cm;
  145. }
  146. @bottom-right {
  147. margin: 1cm;
  148. }
  149. @bottom-right-corner {
  150. margin: 1cm;
  151. }
  152. @left-top {
  153. margin: 1cm;
  154. }
  155. @left-middle {
  156. margin: 1cm;
  157. }
  158. @left-bottom {
  159. margin: 1cm;
  160. }
  161. @right-top {
  162. margin: 1cm;
  163. }
  164. @right-middle {
  165. content: "Page " counter(page);
  166. }
  167. @right-bottom {
  168. margin: 1cm;
  169. }
  170. }
  171. }
  172. @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) {
  173. .b {
  174. background: red;
  175. }
  176. }
  177. body {
  178. background: red;
  179. }
  180. @media (max-width: 500px) {
  181. body {
  182. background: green;
  183. }
  184. }
  185. @media (max-width: 1000px) {
  186. body {
  187. background: red;
  188. background: blue;
  189. }
  190. }
  191. @media (max-width: 1000px) and (max-width: 500px) {
  192. body {
  193. background: green;
  194. }
  195. }
  196. @media (max-width: 1200px) {
  197. /* a comment */
  198. }
  199. @media (max-width: 1200px) and (max-width: 900px) {
  200. body {
  201. font-size: 11px;
  202. }
  203. }
  204. @media (min-width: 480px) {
  205. .nav-justified > li {
  206. display: table-cell;
  207. }
  208. }
  209. @media (min-width: 768px) and (min-width: 480px) {
  210. .menu > li {
  211. display: table-cell;
  212. }
  213. }
  214. @media all and tv {
  215. .all-and-tv-variables {
  216. var: all-and-tv;
  217. }
  218. }
  219. @media screen and (min-width: 61px) {
  220. .selector {
  221. foo: bar;
  222. }
  223. }