Responsive design
You build a page on your laptop, it looks right, and then someone opens it on a phone. The columns you carefully lined up are now crushed into a sliver, the text runs off the edge, and a horizontal scrollbar appears where there should be none. Nobody wrote a separate phone version of the site. There is one page, and it has to look right on a 380 pixel phone and a 1400 pixel monitor without you shipping two of everything. That adaptability is responsive design, and most of it is built from tools you already have.
What responsive means and the viewport
A responsive page is one page that reshapes itself to fit whatever screen it lands on. The same HTML and the same CSS serve a phone, a tablet, and a desktop, and the layout adjusts so nothing overflows and nothing feels cramped. You are not building three sites. You are building one that bends.
Before any of that works, the browser needs one instruction in the HTML. Phones used to pretend they were desktop-width and shrink the whole page to fit, which is why old sites showed up as a tiny, zoomed-out mess. This one line, which lives in the <head> of your HTML, tells the phone to use its real width instead:
<meta name="viewport" content="width=device-width, initial-scale=1" />Without it, your CSS is styling an imaginary wide screen and your careful layout never gets a chance.
Fluid layouts first
The reflex is to reach for special phone rules straight away, but a lot of responsiveness comes for free before you write a single one. If you build with fluid values, ones that stretch and shrink with the space, the layout already adapts.
Two habits carry most of it. Set widths as percentages so a box takes a share of its container rather than a fixed number of pixels, and use max-width so something can shrink on a small screen but never grow past a comfortable reading size on a large one:
.container {
width: 90%; /* takes 90% of whatever space it has */
max-width: 60rem; /* but never wider than 60rem on big screens */
margin: 0 auto; /* centred */
}On a phone this container is 90% of a narrow screen. On a monitor it stops growing at 60rem and sits centred. You did not write a phone rule; the values did the adapting.
max-width so they shrink on phones without stretching too wide on monitors. Those two values adapt the layout on their own. Build fluid first, and you will need far fewer of the phone-specific rules that come next. Media queries
Sometimes fluid values are not enough and you need the layout to actually change at a certain size, for example a menu that stacks vertically on a phone but sits in a row on a desktop. That is what a media query is for: a block of CSS that only applies when the screen meets a condition you set.
Start with the styles for the small screen as your normal CSS, then add a query that layers on the wider-screen changes:
.nav {
display: flex;
flex-direction: column; /* stacked on small screens */
}
@media (min-width: 40rem) {
.nav {
flex-direction: row; /* side by side once there is room */
}
}The rule inside @media (min-width: 40rem) only switches on once the screen is at least 40rem wide. Below that, the plain .nav rule applies and the menu stacks.
@media (min-width: ...) to add the changes for bigger screens. That way the phone view is your starting point, not a patch bolted on afterwards. Choosing breakpoints
A breakpoint is the width where a media query kicks in and the layout changes. The tempting way to choose one is to look up the width of a popular phone or tablet and match it. That is the trap. There are hundreds of device sizes, they change every year, and chasing them is a game you cannot win.
The better question is: at what width does this layout start to look bad? Widen your browser slowly and watch. When a line of text gets too long to read comfortably, or two columns get too narrow, that is where a breakpoint belongs, whatever number it happens to be.
/* Breakpoint chosen because the text got too wide here, */
/* not because a phone happens to be this size */
@media (min-width: 45rem) {
.article { max-width: 38rem; }
}