Responsive design (CSS)
Making your site look good on any device and screen
Basic idea
- Goal: make your website look good on any device
- Important tools:
- Viewport meta tag
- Media queries
Viewport meta tag
- Converts between "hardware pixels" and "software pixels", helping you support screens with different pixel densities
- On a small screen with huge pixel density, you still don't want your website to for example fill only a part of the screen or show tiny text
- If used correctly, a small screen with huge pixel density will appear to your CSS rules as a screen with small dimensions in terms of pixels
- See also mydevice.io and whatismyviewport.com
- Doesn't change actual design, just makes sure you have sensible width and height values to base your design on
Example (common, recommended version of the tag):
<meta name="viewport" content="width=device-width,initial-scale=1">
Media queries
- Allow changing design based on viewport width/height
- Have to define design changes yourself based on detected width/height
- Widely used in CSS framworks like Bootstrap
Example:
@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}
Common approach: mobile-first design
- First create a design that looks good on narrow-screen devices
- Then use media queries to change the layout on larger screens so it looks better or makes better use of the available screen space
Flexbox and Grids
In general, Flexbox and Grids are good tools for building pages that scale with the viewport size
Testing your design
Useful tool: Chrome DevTools Device Mode
See Simulate Mobile Devices with Device Mode in Chrome DevTools