What are common breakpoints for responsive design?

Common breakpoints are: 320px (small mobile), 768px (tablet), 1024px (small desktop), and 1200px (large desktop). Base your breakpoints on your content, not devices.

Responsive Web Design: A Complete Guide

Q: What is responsive web design?

Responsive web design means designing websites that adapt to any screen size→desktop, tablet, or mobile→using flexible layouts, flexible images, and CSS media queries.

Responsive web design isn't optional anymore→it's mandatory. With users accessing websites from devices ranging from 320px-wide phones to 4K desktop monitors, your website must adapt seamlessly. As a web developer who's built responsive sites for over a decade, I'll share everything you need to know.

What Is Responsive Web Design?

Responsive web design (RWD) is an approach that makes web pages render well on any device or screen size. It uses three core techniques:

Fluid grids: Layouts that use percentages instead of fixed pixels
Flexible images: Images that scale within their containers
Media queries: CSS rules that apply at specific breakpoints

Setting Up the Viewport

Every responsive website needs this meta tag in the <head>:

Without this, mobile browsers will render your page at desktop width and scale it down, making text unreadable.

CSS Media Queries: The Backbone of Responsive Design

Media queries let you apply different CSS rules based on device characteristics:

Common breakpoints I use:

320px: Small mobile phones
768px: Tablets (portrait)
1024px: Small desktops, tablets (landscape)
1200px: Large desktops

Pro tip: Let your content determine breakpoints, not specific devices. When your layout breaks, that's your breakpoint.

Mobile-First Approach

Write CSS for the smallest screen first, then add media queries for larger screens:

Start with base styles (no media queries)
Add min-width media queries to enhance for larger screens
This ensures mobile users get a lightweight experience

Flexible Layouts with Flexbox and Grid

Modern CSS makes responsive layouts easier:

Flexbox (1-dimensional)

Great for navigation bars, card layouts, and centering content:

flex-direction: column (mobile) → row (desktop)
flex-wrap: wrap for responsive grids
justify-content and align-items for spacing

CSS Grid (2-dimensional)

Perfect for complex page layouts:

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
Automatically creates responsive columns

Responsive Images

Images should scale with their container:

Always set max-width: 100% on images
Use height: auto to maintain aspect ratio
Use srcset for different device resolutions
Add loading="lazy" for images below the fold

Responsive Typography

Text should be readable on all devices:

Use relative units (rem, em) instead of px
Minimum 16px for body text on mobile
Use clamp() for fluid typography: font-size: clamp(1rem, 2vw, 1.5rem)

Testing Responsive Designs

Don't just rely on browser DevTools. Test on:

Real mobile devices (iOS and Android)
Tablets and different screen sizes
Different orientations (portrait and landscape)
Google's Mobile-Friendly Test

Common Responsive Design Mistakes

Mistake	Solution
Fixed-width layouts	Use percentages or fr units
Small touch targets	Minimum 44x44px for buttons
Horizontal scrolling	Set overflow-x: hidden on body
Tiny mobile text	Minimum 16px font size

Frequently Asked Questions

Q: Is responsive design the same as mobile-first?

A: No. Responsive design means your site adapts to all screens. Mobile-first is a design approach that starts with mobile and scales up. Mobile-first leads to better responsive designs.

Q: Do I need to build a separate mobile site?

A: No! Separate mobile sites (m.example.com) are outdated. Use responsive design for a single site that works everywhere.

Need a Responsive Website?

Get a Responsive Website That Works Everywhere

I build fully responsive websites that look great on any device.

Start Your Responsive Site

Disclosure: I may earn a commission if you purchase through my links at no extra cost to you.