Responsive Design

In Turkish: Duyarlı Tasarım

Updated September 30, 20262 min read

In short

Responsive design is an approach to building web pages whose layout, images, and text adapt automatically to any screen size, from phones to large monitors.

What is responsive design?

Responsive design means building one website that works well on every device instead of separate mobile and desktop versions. The layout rearranges itself as the available space changes: a three-column grid on a wide screen might become a single column on a phone, and a full navigation bar might collapse into a menu button.

It relies on a few core techniques. Flexible layouts built with CSS Flexbox and Grid use relative units like percentages, rem, and fr instead of fixed pixel widths; media queries apply different styles above or below certain screen widths, called breakpoints; and responsive images use srcset so each device downloads a suitably sized file. Container queries go further by letting a component adapt to the size of its parent element rather than the whole screen.

A common strategy is mobile-first: write the base styles for small screens, then add media queries with min-width to enhance the layout on larger ones. Think of water taking the shape of whatever glass it is poured into; the content stays the same, but its arrangement fits the container. The page also needs the viewport meta tag, <meta name="viewport" content="width=device-width, initial-scale=1">, or mobile browsers will show it as a shrunken desktop page.

Responsive design is often confused with adaptive design. Adaptive design serves a few fixed layouts built for specific screen sizes, while responsive design flows smoothly across all sizes. Search engines such as Google index the mobile version of pages first, so a site that works poorly on phones can also rank lower.

Key takeaways

One responsive site adapts to phones, tablets, and desktops.
Flexible layouts, relative units, and media queries are the core tools.
Mobile-first means styling for small screens first, then enhancing.
The viewport meta tag is required for correct mobile rendering.
Container queries let components respond to their own available space.

Example

A mobile-first responsive gridcss

/* Mobile first: one column by default */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* On screens at least 768px wide, switch to three columns */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* Images shrink to fit their container instead of overflowing */
img { max-width: 100%; height: auto; }

Readers ask

What is the difference between responsive and adaptive design?

Responsive design uses fluid layouts that adjust continuously to any screen width. Adaptive design detects the screen size and serves one of several fixed layouts built for specific widths.

What is a breakpoint in responsive design?

A breakpoint is a screen width at which the layout changes, defined with a CSS media query such as @media (min-width: 768px). Good breakpoints are chosen where the content starts to look cramped, not based on specific device models.

What does mobile-first mean?

Mobile-first means writing the default styles for small screens and adding rules for larger screens with min-width media queries. It keeps mobile pages lighter and encourages you to prioritize the most important content.