css - What is RWD

1. What is RWD?

Responsive Web Design (RWD) ensures your website adapts to different screen sizes (desktop, tablet, mobile) so it looks good and remains usable everywhere.

Key goals:

  • Flexible layouts

  • Flexible images/media

  • CSS that adapts to screen size

2. Core Techniques in CSS

a) Fluid Layouts

Instead of fixed pixel widths, use percentages so elements scale with the viewport.

.container {
  width: 80%;   /* 80% of parent container or viewport */
  margin: 0 auto;
}

b) Flexible Images

Images scale according to their container using max-width: 100%.

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

c) Media Queries

Media queries apply different CSS rules depending on screen width, height, or device type.

/* Default styles for desktop */
body {
  font-size: 18px;
}

/* For tablets */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* For mobile phones */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

d) Flexible Grids

Instead of fixed columns, use CSS Grid or Flexbox with relative sizing.

Flexbox Example:

.navbar {
  display: flex;
  flex-wrap: wrap; /* wraps items on small screens */
}

.navbar a {
  flex: 1 1 150px; /* grow/shrink with a min width of 150px */
  text-align: center;
}

CSS Grid Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

  • auto-fit adjusts columns automatically based on available space.

  • minmax(200px, 1fr) ensures each column is at least 200px wide and can expand.

3. Tips for RWD

  1. Start mobile-first → write CSS for small screens first, then use media queries for larger screens.

  2. Test on real devices or browser dev tools.

  3. Avoid fixed widths; rely on %, em, rem, vw, vh units.

  4. Use flexible images, videos, and fonts.