Responsive Web Design
Download as KEY, PDF1 like505 views
This document discusses the key techniques for responsive web design including fluid images and layouts, liquid layouts using percentages instead of fixed widths, and media queries to apply different CSS styles based on screen width. Responsive design allows a website to automatically adapt its layout and elements to display properly on screens of different sizes from mobile to desktop.
Responsive Web Design
- 1. Responsive Web Design Web by Shinichiro Yabu 26 Feb. 2011
- 9. mod_rewrite
- 12. JS
- 13. CSS
- 15. Fluid Image Liquid Layout Media Query
- 16. Fluid Image
- 18. img, object, iframe { max-width: 100%; }
- 19. Liquid Layout
- 21. 250px *
- 23. 25% 70% 25% 70%
- 24. Media Query
- 26. @media screen and (max-width: 595px) { … }
- 27. Media Query CSS @import url(screen.css) screen; @import url(print.css) print; @media print { ... }
- 28. Media Query 595 px @media screen and (max-width: 595px) { ... } 1440px @media screen and (min-width: 1440px) { ... }
- 34. Responsive Web Design Web Be happy forever!