MATERIAL FOR REFERENCE
Keep these techniques handy — they are the core of responsive, interactive pages.
The viewport tag
Responsive design starts in the <head> with one line that tells phones to render the page at their real width instead of pretending to be a desktop:
<meta name="viewport" content="width=device-width, initial-scale=1">
Media queries
A media query applies CSS only when the screen meets a condition — usually a maximum width. Everything inside the braces takes effect only on screens at or below that size:
@media (max-width: 620px) {
.footer-grid { grid-template-columns: 100%; }
}
Responsive images
Two properties keep an image from overflowing its container: cap its width at 100% of the space, and let the height follow along so it never distorts.
img {
max-width: 100%;
height: auto;
}
The four link states
Links can be styled for each state a visitor moves through — and the order matters, because later rules can override earlier ones:
a:link — a link not yet visited
a:visited — a link already visited
a:hover — the pointer is over the link
a:active — the moment it is clicked