Introduktion till webbutveckling HT12: föreläsning 9

On Media Queries and Responsive Design. For the Swedish university course Introduction to Web Development: .

(Published under a Creative Commons BY license.)

Transcript

1. Introduktion till webbutveckling F9: Media Queries och Responsive Design
2. http://www.flickr.com/photos/69797234@N06/7203485148
8. http://mediaqueri.es/
9. “repsonsive web design”
10. http://www.alistapart.com/articles/responsive-web-design/
11. http://www.abookapart.com/products/responsive-web-design
12. The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. —John Allsopp, 2000 http://www.alistapart.com/articles/dao/
13. CSS 3 Media Queries Flexible layout Flexible media Breakpoints Mobile viewport sizes Compatibility
14. Media Queries http://www.w3.org/TR/css3-mediaqueries/
15. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
16. @media screen { body { font-family: sans-serif } }
17. @media screen and (min-width:500px) { … } @media (min-width:300px) { … } @media screen and (min-device-width: 480px) and (orientation: landscape{ … }
18. Enkla media queries i exempeldokumentet. (1. print) 2. enkla baserat på bredd
19. Flexible layout & media
20. %
21. Exempeldokument -> dynamisk bredd
22. Which Breakpoints? . . .
23. Device-based vs. Content-based
24. RWD, s.114
25. ?
26. Exempeldokument -> +1 breakpoint, smalare
27. Mobile Viewport Sizes
29. alert(document.documentElement.clientWidth);
30. <meta name="viewport" content="initial-scale=1.0, width=device-width"> -> Exempeldokument
31. Compatibility
32. 1.No media queries? No problem. Tänk igenom basfallet. 2.css3-mediaqueries.js eller respond.js Kanske…
33. “that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility” —RWD, s. 139