Lesson 9: Responsive Design
More than half of all web traffic comes from phones. Responsive design means your page looks great on any screen size — desktop, tablet, or phone — without building separate sites.
Key Concepts
Viewport Meta Tag
Always include <meta name='viewport' content='width=device-width, initial-scale=1.0'> in your <head>. Without it, mobile browsers zoom out to show a tiny desktop version of your page.
Media Queries
@media (max-width: 600px) { } lets you write CSS that only applies on small screens. You can change layout, hide elements, adjust font sizes — anything — based on the screen width.
Flexible Units
Instead of fixed px widths, use % (percentage of parent), vw (percentage of screen width), or max-width to keep content from getting too wide. rem units for font sizes scale with user preferences.
🆕 Live Editor
Edit the code — the preview updates live!