Successfully reported this slideshow.

Meta layout: a closer look at media queries

41

Share

Loading in …3
×
1 of 100
1 of 100

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Meta layout: a closer look at media queries

  1. @media mobilism and (year: 2011) MEDIA QUERIES A 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 and Enough. Enough. (device-aspect-ratio: 16/9) What about the Media Features? hides the CSS from older browsers
  22. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  23. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  24. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  25. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  26. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  27. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  28. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  29. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  30. Media Features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  31. Media Features likely you’ll use these most: width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  32. Testing
  33. Testing Yes, you are.
  34. Prefixed Features
  35. Prefixed Features How many device pixels per CSS pixel?
  36. Prefixed Features How 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 Features How 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 Features A 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 css media attribute of link element
  52. Applying media queries as blocks in css media 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 and content 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 to Components to Systems
  61. Layout strategy wireframes drupal.org/node/413910
  62. Layout strategy wireframes graffletopia.com/stencils/358
  63. Layout strategy Reference wireframing A B C D g E H F
  64. Layout strategy Breakpoint graphs 0 px 600 px 900 px We have no idea
  65. Layout strategy Breakpoint graphs 0 px 600 px 900 px We have no idea Structured content first
  66. Layout strategy Breakpoint graphs 0 px 600 px 900 px We have no idea Structured content first
  67. Layout strategy Breakpoint graphs 0 px 600 px 900 px We have no idea Structured content first
  68. Layout strategy Breakpoint graphs 0 px 600 px 900 px We have no idea Structured content first
  69. Layout strategy Breakpoint graphs 0 px 600 px 900 px We have no idea Fluid layout Structured content first
  70. Order-independent layout mechanisms
  71. N S E
  72. Flexible Box Layout module S N E
  73. Flexible Box Layout module tb S N E
  74. H C A F
  75. Grid layout module
  76. H Grid layout C A module F
  77. H Grid layout module C A (templates) F
  78. Grid layout module (templates)
  79. F C Grid layout module (templates) H A
  80. Not as cool as two bears fighting a F hockey player. C H A
  81. Media queries / (meta) viewport
  82. Media queries / (meta) viewport fluid layouts
  83. Media queries / (meta) viewport fluid layouts device/browser support profiles
  84. Media queries / (meta) viewport fluid layouts device/browser support profiles content reference wireframing
  85. Media queries / (meta) viewport fluid layouts device/browser support profiles content reference wireframing layout breakpoint graphs
  86. Media queries / (meta) viewport fluid layouts device/browser support profiles content reference wireframing layout breakpoint graphs new layout mechanisms
  87. Think in terms of design principles & systems
  88. The art of letting go
  89. We need to think up new ways to design layout, and new ways to communicate these new designs to our colleagues and our clients.
  90. Thank you! Starring magician Howard Thurston as B. Rowser
  91. http://www.delicious.com/stephenhay/mobilismconf2011 http://www.slideshare.net/stephenhay/mobilism2011 Thank you! Starring magician Howard Thurston as B. Rowser
  92. http://www.delicious.com/stephenhay/mobilismconf2011 http://www.slideshare.net/stephenhay/mobilism2011 Thank you! @stephenhay Starring magician Howard Thurston as B. Rowser

×