Responsive Web Design Principles

Responsive design ensures your website looks great and functions well on all devices, from smartphones to desktop computers.

Mobile-First Approach

Start designing for mobile devices first, then enhance for larger screens:

css

/* Mobile styles (default) */
.container {
  width: 100%;
  padding: 1rem;
}

/* Tablet styles */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    padding: 2rem;
  }
}

Flexible Images

Make images responsive:

css

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

/* For background images */
.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}