Responsive Design

Responsive web design ensures websites look great on every device — from phones to tablets to desktops. The core principle is using flexible layouts and CSS media queries to adapt the presentation to the viewport size.

Viewport Meta Tag

The viewport meta tag controls how the page is displayed on mobile devices. Without it, mobile browsers render the page at a desktop width and zoom out:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width sets the viewport width to the device's screen width. initial-scale=1.0 sets the initial zoom level.

Media Queries

Media queries apply CSS conditionally based on device characteristics like width, orientation, or resolution:

@media (max-width: 768px) {
  .sidebar { display: none; }
}
 
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

Common features: width, height, orientation, prefers-color-scheme, prefers-reduced-motion, resolution.

Mobile-First Approach

Mobile-first means writing base styles for small screens, then adding complexity at larger breakpoints using min-width queries. This approach:

• Starts with the simplest layout
• Only adds complexity when space allows
• Naturally degrades gracefully
• Is the industry standard

/* Base: mobile styles */
.container { display: block; }
 
/* Tablet */
@media (min-width: 768px) {
  .container { display: grid; grid-template-columns: 1fr 1fr; }
}
 
/* Desktop */
@media (min-width: 1200px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}

Common Breakpoints

• 576px — landscape phones
• 768px — tablets
• 992px — desktops
• 1200px — wide desktops

Use breakpoints based on your content, not specific devices.

Fluid Layouts

Fluid layouts use relative units instead of fixed pixel widths:

• % — percentage of parent
• vw / vh — percentage of viewport
• fr — fraction of available space in Grid
• minmax(min, max) — responsive range in Grid

Combine with max-width to prevent content from becoming too wide on large screens:

.container { width: 100%; max-width: 1200px; margin: 0 auto; }