4 Responsive Web Design
Learn how to build web pages that adapt to different screen sizes through flexible layouts, purposeful breakpoints, and usability testing.
Start with the
adapts a page to the space available instead of forcing one fixed layout onto every screen. The aim is to keep content clear and usable on narrow phones, wide desktops, and sizes in between.
Begin by setting the in the document's <head> so mobile browsers use the device's CSS-pixel width when laying out the page:
Without an appropriate setting, some mobile browsers may lay out a page as if it were much wider than the screen. This can make responsive styles behave unexpectedly.
Takeaway: Establish the correct before adjusting the page layout.
Build flexible layouts
Fixed widths can overflow on small screens and leave excessive empty space on large ones. Flexible sizing lets content use the available room and wrap as needed. helps arrange content in two dimensions, while Flexbox is useful for arranging items in one direction.
This grid fits as many columns as the container can accommodate while keeping each card at least 15rem wide:
The min() function prevents the card's minimum width from forcing overflow in a narrower container. Other useful tools include percentages, flexible grid units such as fr, and constraints such as max-width. For example, a centered text column can grow on a large screen but stop at a readable width:
Images and other media should not exceed their containers. A common starting rule is:
Providing image width and height attributes also helps the browser reserve space while an image loads.
Takeaway: Let content and media fit their containers instead of relying on fixed widths.
Adapt when the layout needs it
A marks where a layout changes to suit the available space. Media queries apply CSS only when a condition, such as width, is met. Add a when the current arrangement no longer works well; prefer layouts that adapt naturally before introducing one.
A approach begins with a simple layout for narrow screens, then adds complexity when there is enough room:
Below the , the main content and sidebar stack vertically. At wider widths, they appear side by side. Media queries can also adjust spacing, type size, or navigation presentation. Choose breakpoints based on when the content needs a change, not on particular device models.
Takeaway: Start with a layout that works in limited space, then use targeted changes when more room makes a different arrangement useful.
Check reflow and usability
Test the page by resizing the browser, checking narrow and wide viewports, zooming in, and trying keyboard navigation. Look for clipped text, overlapping elements, tiny controls, and unintended horizontal scrolling.
Content should generally reflow at a width equivalent to 320 CSS pixels without requiring two-dimensional scrolling to read ordinary text. Some content, such as a wide data table, may genuinely need a two-dimensional layout.
Takeaway: Check that the layout remains usable as conditions change, while allowing for content that has a genuine need for two-dimensional space.