2
0

media_query_02.rml 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <rml>
  2. <head>
  3. <title>Media query: Sprite sheets</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <meta name="Description" content="Spritesheets located within media blocks.<br/><br/>Try reducing the width of the window to see the icon and image change, and adjust the dp-ratio with Ctrl +/-/0." />
  6. <style>
  7. body {
  8. background: #ddd;
  9. color: #444;
  10. right: 440dp;
  11. width: auto;
  12. left: 0;
  13. }
  14. icon {
  15. display: block;
  16. decorator: image(icon scale-none);
  17. width: 64dp;
  18. height: 64dp;
  19. }
  20. @spritesheet
  21. {
  22. src: /assets/invader.tga;
  23. icon: 332px 152px 51px 39px; /* icon-waves */
  24. }
  25. @media (min-width: 1000px)
  26. {
  27. @spritesheet
  28. {
  29. src: /assets/invader.tga;
  30. icon: 179px 152px 51px 39px; /* icon-invader */
  31. }
  32. }
  33. @media (min-width: 1300px)
  34. {
  35. @spritesheet
  36. {
  37. src: /assets/invader.tga;
  38. icon: 230px 152px 51px 39px; /* icon-game */
  39. }
  40. }
  41. @media (min-resolution: 2x)
  42. {
  43. @spritesheet
  44. {
  45. src: /assets/high_scores_alien_1.tga;
  46. icon: 0 0 64px 64px;
  47. resolution: 2x;
  48. }
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <icon/>
  54. <img sprite="icon"/>
  55. </body>
  56. </rml>