Responsive Web Design: A Practical Beginner Guide

More than half of web visits come from phones, so a website that only works on a desktop loses visitors. Responsive design makes one site adapt to any screen.

1. Add the viewport tag

Include <meta name="viewport" content="width=device-width,initial-scale=1"> in the head. Without it, phones show a shrunken desktop page.

2. Design mobile first

Write the base CSS for small screens, then add rules for larger screens with min-width media queries. This keeps mobile pages light and simple.

3. Use flexible layouts

CSS Grid and Flexbox let content wrap and resize naturally. A rule such as grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) creates a responsive grid without any media query.

4. Make images flexible

Set max-width: 100% and height: auto on images, and use the srcset attribute to serve smaller files to small screens.

5. Use relative units

Prefer rem, em, percentages and clamp() over fixed pixels for text and spacing, so layouts scale smoothly.

6. Test on real devices

Resize the browser, use the device toolbar in developer tools, and check a real phone. Look for text that is too small, buttons that are hard to tap and horizontal scrolling.