CSS Responsive Design

Make your website look perfect on mobile, tablet, and desktop.

What is Responsive Design?

Responsive Web Design means designing websites that automatically adapt to different screen sizes and devices such as mobiles, tablets, laptops, and desktops.

  • One website for all devices
  • No horizontal scrolling
  • Better user experience
  • Improved SEO ranking

Real-Life Example:
Like water taking the shape of the glass it is poured into.

Why Responsive Design is Important?

  • Most users browse on mobile
  • Google prefers mobile-friendly websites
  • Saves development time
  • Improves accessibility

Viewport Meta Tag

The viewport controls how your website is displayed on different devices.

Viewport Example

Without viewport: Mobile shows zoomed-out website.
With viewport: Website fits screen perfectly.

Responsive CSS Units

Responsive units allow elements to resize based on screen size.

  • % – relative to parent
  • vw – viewport width
  • vh – viewport height
  • em – relative to font size
  • rem – relative to root font size

Responsive Unit Example


.container {
    width: 90%;
    font-size: 1.2rem;
}

CSS Media Queries

Media Queries allow you to apply CSS styles based on device screen size.

  • Change layout for mobile
  • Adjust font sizes
  • Hide or show elements

Media Query Example

Mobile Responsive Layout


body {
    font-size: 18px;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

Explanation:
When screen width is 768px or less, font size becomes smaller.

Responsive Layout Techniques

  • Flexbox
  • CSS Grid
  • Fluid widths
  • Media queries

Responsive Layout with Flexbox

Flexbox Responsive Example


.cards {
    display: flex;
    flex-wrap: wrap;
}

.card {
    width: 33%;
}

@media (max-width: 768px) {
    .card {
        width: 100%;
    }
}

Responsive Images

Images should resize automatically on different screens.

Responsive Image Example


img {
    max-width: 100%;
    height: auto;
}

Common Responsive Breakpoints

  • Mobile: max-width: 576px
  • Tablet: max-width: 768px
  • Laptop: max-width: 1024px
  • Desktop: 1200px+

Best Practices for Responsive Design

  • Mobile-first approach
  • Use flexible layouts
  • Avoid fixed widths
  • Test on real devices

Pro Tip: Design for mobile first, then scale up.