Your SlideShare is downloading. ×
Meta layout: a closer look at media queries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Meta layout: a closer look at media queries

15,418
views

Published on


0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,418
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
230
Comments
0
Likes
40
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. @media mobilism and (year: 2011) MEDIA QUERIESA CLOSER LOOK AT BY STEPHEN HAY
  • 2. B. Rowser
  • 3. Hi handsome.
  • 4. @media mood and (min-level: fine) Fine.
  • 5. @media screen and (min-width: 600px) Yes.
  • 6. @media all and (orientation: landscape)What are you, an idiot?
  • 7. As you wish.
  • 8. MEDIA QUERIES@media [not|only] type [and] (expr) { rules;}== Feature detection
  • 9. MEDIA TYPES @media screen { ... } @media print { ... }@media handheld { ... }
  • 10. MEDIA TYPES @media screen { ... } @media print { ... } @media handheld { ... }Let’s add some logic...@media screen and { ... }
  • 11. MEDIA TYPES @media screen { ... } @media print { ... } @media handheld { ... } Let’s add some logic... @media screen and { ... }and a feature to query@media screen and (color) { ... }
  • 12. MEDIA TYPES @media screen { ... } @media print { ... }Hey—@media handheld { ... } tell them some more about logic, Let’s add you bastard. some logic... @media screen and { ... }and a feature to query@media screen and (color) { ... }
  • 13. logical AND@media screen and (min-width: 600px)and (max-width: 1200px) constrains a query
  • 14. logical OR@media screen and (min-resolution:300dpi), screen and (-webkit-min-device-pixel-ratio: 2) the comma is an OR
  • 15. logical NOT@media not screen and (color)
  • 16. logical NOT@media not screen and (color) be careful...
  • 17. logical NOT@media not screen and (min-width: 600px)
  • 18. logical NOT @media not screen and (min-width: 600px) does not evaluate as:@media (not screen) and (min-width: 600px)
  • 19. logical NOT @media not screen and (min-width: 600px) does not evaluate as:@media (not screen) and (min-width: 600px) does evaluate as:@media (not (screen and (min-width: 600px)))
  • 20. ONLY @media only all and (device-aspect-ratio: 16/9)hides the CSS from older browsers
  • 21. ONLY @media only all andEnough. Enough. (device-aspect-ratio: 16/9)What about theMedia Features? hides the CSS from older browsers
  • 22. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 23. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 24. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 25. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 26. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 27. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 28. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 29. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 30. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 31. Media Featureslikely you’ll use these most:width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 32. Testing
  • 33. TestingYes, you are.
  • 34. Prefixed Features
  • 35. Prefixed FeaturesHow many device pixels per CSS pixel?
  • 36. Prefixed FeaturesHow many device pixels per CSS pixel? -webkit-[min|max]-device-pixel-ratio [min|max]--moz-device-pixel-ratio -o-[min|max]-device-pixel-ratio
  • 37. Prefixed FeaturesHow many device pixels per CSS pixel? -webkit-[min|max]-device-pixel-ratio [min|max]--moz-device-pixel-ratio -o-[min|max]-device-pixel-ratio -webkit-min-device-pixel-ratio: 1.5 -o-min-device-pixel-ratio: 3/2
  • 38. Prefixed FeaturesA pixel is not a pixel.
  • 39. Prefixed Features Is this a touch device? -moz-touch-enabled
  • 40. Prefixed Features Is this a touch device? -moz-touch-enabled@media screen and (-moz-touch-enabled) { /* touchy styles */}
  • 41. Viewport@media screen and (max-device-width: 320px)
  • 42. Viewport@media screen and (max-device-width: 320px) device-width layout viewport
  • 43. Viewport@media screen and (max-device-width: 320px) Meta viewport.
  • 44. Meta viewport <meta name="viewport"content="width=device-width">
  • 45. Meta viewport <meta name="viewport" content="width=device-width">use that in combination with WIDTH @media screen and (max-width: 320px) { div { width: 80%; } }
  • 46. Meta viewport <meta name="viewport" content="width=device-width, initial-scale=1">use that in combination with WIDTH @media screen and (max-width: 320px) { div { width: 80%; } }
  • 47. viewport in CSS?@viewport { width: device-width; zoom: 1; /* No, not THAT zoom */}
  • 48. viewport in CSS? Enough already. @viewport {How zoom: 1; /* No, not THAT can we apply width: device-width; zoom */ these things? }
  • 49. Applying media queries
  • 50. Applying media queries as blocks in css
  • 51. Applying media queries as blocks in cssmedia attribute of link element
  • 52. Applying media queries as blocks in cssmedia attribute of link element @import
  • 53. Applying media queries
  • 54. You don’t always need them
  • 55. omg
  • 56. Layout is not design.
  • 57. Design is the art of putting form andcontent together. Paul Rand said that
  • 58. The media query is a screwdriver.Layout is only one of the components of design.
  • 59. Hey dude, remember when we designed web PAGES?
  • 60. Pages toComponents to Systems
  • 61. Layout strategy wireframes drupal.org/node/413910
  • 62. Layout strategy wireframes graffletopia.com/stencils/358
  • 63. Layout strategyReference wireframing A B C D g E H F
  • 64. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no idea
  • 65. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  • 66. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  • 67. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  • 68. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  • 69. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no idea Fluid layoutStructured content first
  • 70. Order-independentlayout mechanisms
  • 71. NSE
  • 72. Flexible BoxLayout moduleS N E
  • 73. Flexible BoxLayout module tb S N E
  • 74. HCAF
  • 75. Grid layout module
  • 76. HGrid layout C A module F
  • 77. HGrid layout module C A(templates) F
  • 78. Grid layout module(templates)
  • 79. F CGrid layout module(templates) H A
  • 80. Not as cool as two bears fighting a F hockey player. C Grid layout module (templates) H A
  • 81. Media queries / (meta) viewport
  • 82. Media queries / (meta) viewport fluid layouts
  • 83. Media queries / (meta) viewport fluid layoutsdevice/browser support profiles
  • 84. Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing
  • 85. Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing layout breakpoint graphs
  • 86. Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing layout breakpoint graphs new layout mechanisms
  • 87. Think in terms ofdesign principles & systems
  • 88. The art of letting go
  • 89. We need to think up new ways to design layout, and new waysto communicate these new designs to our colleagues and our clients.
  • 90. Thank you!Starring magician Howard Thurstonas B. Rowser
  • 91. http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you!Starring magician Howard Thurstonas B. Rowser
  • 92. http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you! @stephenhayStarring magician Howard Thurstonas B. Rowser