CSS.4: Responsive Design


"Responsive design" describes web designs that change layout depending on the width of the screen (e.g. mobile vs desktop). Most responsive design is implemented with CSS media queries.
Responsive designs are done in "breakpoints" as in the illustration above. Each layout is arranged for a target screen width, usually in this order starting with the narrowest: mobile portrait, tablet, laptop then desktop.


When developing responsive webpages, develop the mobile layout first because the mobile layout typically has fewer parts. Then develop the tablet and desktop versions which, because of the increased screen real-estate, usually adds to the design. It is more difficult to go the other way around, because using CSS to take things out of the narrower mobile view is harder than putting them into the wider desktop view.

Responsive Design Principles

Use Viewport Tag for Mobile Views

Many students miss this, causing CSS layout issues in mobile views. Please add this to websites we want to work on mobile.
For mobile first layouts we need to add a scaling meta tag in our head tag. This is to develop for mobile on desktop without squinting. Chrome DevTools assumes we have this scaling tag when debugging mobile layouts. Read more about the viewport tag here.​
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Further Reading

Video on media queries:​