Web Analytics
☕ Coffee 𝕏 Follow
0%

Responsive Design

Intermediate ~12 min read

What is Responsive Design?

Responsive design makes websites adapt to different screen sizes and devices. Your site should look great on phones, tablets, and desktops!

Media Queries Basics

Media queries apply CSS rules based on screen size. Syntax: @media (condition) { /* CSS */ }

HTML
CSS
JS

Common Breakpoints

Standard breakpoints for different devices:

  • Mobile: 320px - 480px
  • Tablet: 481px - 768px
  • Desktop: 769px - 1024px
  • Large Desktop: 1025px+

Mobile-First Approach

Start with mobile styles, then add complexity for larger screens using min-width. This is the modern best practice!

HTML
CSS
JS

Responsive Grid Layout

Change grid columns based on screen size for optimal layouts on all devices.

HTML
CSS
JS

Hiding Elements

Show or hide elements based on screen size using display: none.

HTML
CSS
JS

Responsive Typography

Adjust font sizes for better readability on different screens.

HTML
CSS
JS

Responsive Navigation

Transform horizontal desktop navigation into a vertical mobile menu.

HTML
CSS
JS
Don't Forget: Always include the viewport meta tag in your HTML:
<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Best Practices

  • Use mobile-first approach with min-width
  • Test on real devices, not just browser resize
  • Use relative units (%, em, rem) over fixed pixels
  • Keep breakpoints simple (3-4 is usually enough)
  • Optimize images for different screen sizes
  • Touch targets should be at least 44×44px on mobile

Quick Quiz

Which approach is recommended for responsive design?

A
Desktop-first with max-width
B
Mobile-first with min-width
C
Tablet-first
D
No media queries
Previous Grid Advanced
Next Backgrounds