14. Media Queries
● What is Media Queries?
A media query combines a media type and a
condition to specify how web content will
appear on a particular receiving device.
15. Media Queries
● Example
@media screen and (min-width:1001px) and (max-width:1400px){
body {
background-color: red;
}
}
@media screen and (min-width:501px) and (max-width:1000px){
body {
background-color: blue;
}
}
@media screen and (min-width:240px) and (max-width:500px){
body {
background-color: white;
}
}
17. Design
● How to design website?
○ Design from smallest to larger viewports/screen
sizes.
○ "Stop thinking in pages, start thinking in systems."
- Jeremy Keith
18. Conclusion
● Advantage
○ User Experience (Mobile/Tablet/Desktop)
○ Analytics
○ Not separate mobile site (for Sharing/Linking)
○ Optimized content (SEO best practice)
○ Development (no redirects/user-agent targeting)
○ Maintenance
○ Information Architecture
19. Conclusion
● Disadvantage
○ Limitations of CSS media queries
○ Image resizing
○ Speed
○ Mobile needs and desktop needs may be different
○ Mobile versions are always more optimized
22. References
● Books:
○ Responsive Web Design with HTML5 and CSS3 by
Ben Frain
● URLs:
○ HTML5 : http://slides.html5rocks.com
○ RWD : http://goo.gl/eagpD