Responsive design and media queries

Why it matters

Most people in India open websites on a phone. A page made only for laptops forces them to pinch and zoom. Responsive design means one page that rearranges itself to fit every screen.

Step 1: the viewport meta tag

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

Step 2: flexible sizes

• Use %, fr, rem and max-width instead of fixed pixel widths.
• Make images shrink: img { max-width: 100%; height: auto; }
• Let grids decide columns with auto-fit and minmax.

Step 3: media queries

A media query applies CSS only when a condition is true, usually the width of the viewport. Mobile-first means: write the phone styles as the base, then add min-width queries that enhance the layout on bigger screens.

/* Base: phones. One column. */
.layout { display: grid; gap: 16px; }

/* Tablets and up */
@media (min-width: 600px) {
  .layout { grid-template-columns: 1fr 1fr; }
}

/* Laptops and up */
@media (min-width: 1024px) {
  .layout { grid-template-columns: 250px 1fr 1fr; }
}

A breakpoint is a width where the layout changes. Do not pick widths of famous phones; widen your browser slowly and add a breakpoint where the design starts to look stretched or cramped.

Touch and preferences

• Tap targets (buttons, links) should be at least about 44px by 44px with space between them.
• Hover does not exist on touch screens: never hide important actions behind hover only.
• @media (prefers-color-scheme: dark) lets you offer a dark theme that follows the phone setting.
• @media (prefers-reduced-motion: reduce) lets you calm animations for people who get dizzy.