Responsive web design allows websites to automatically adapt their layout to different screen sizes and devices using fluid grids, breakpoints, and media queries. Websites use relative units like percentages for layouts, breakpoints to specify CSS for different screen widths, and media queries to apply distinct styles based on screen size or device. Examples demonstrate how responsive design adapts content for different devices like mobile phones and desktops.

1. LAB#12 Responsive Web
Design
322432 Web Design Technology

2. Responsive Web Design

4. Responsive Web Design
•
•
• Relative
Fluid Layouts (%)
• Breakpoints
Media Queries
• Meta Viewport
• Device

6. •

7. • Relative Fluid
Layouts (%)
Example
http://learn.shayhowe.com/advanced-html-css/responsive-web-design

8. Breakpoints
Media Queries

9. Meta Viewport

10. Example
@media screen and (min-width: 800px) and
(max-width: 1200px) { .test { font-
size: 14pt; } }
http://www.designil.com/what-is-responsive-web-design-1.html
@media screen and ( ) and ( ) and ... {
/* CSS