CSS RWD Introduction
In this page:
What Responsive Design Solves
Before responsive design, sites either built a separate mobile version or forced phone users to pinch-zoom a desktop layout. Responsive design instead ships one HTML/CSS codebase that reflows itself to fit whatever viewport it lands on, using relative sizing and conditional rules instead of a fixed pixel-perfect layout.
Example: What Responsive Design Solves
<style>
.page {
width: 100%;
background: lightblue;
padding: 10px;
}
</style>
<div class="page">One codebase reflows to fit any viewport</div>Pillar One: Fluid Layouts
Fluid layouts size containers with percentages, fr units, or flex/grid ratios instead of fixed pixel widths, so a column that is 50% of its parent stays 50% whether the parent is 320px or 1920px wide. This is the structural foundation everything else in RWD builds on top of.
Example: Pillar One: Fluid Layouts
<style>
.column {
width: 50%;
background: lightblue;
padding: 10px;
}
</style>
<div class="column">Always 50% of its parent, at any screen width</div>Pillar Two: Flexible Media
Images and video need their own rule since a 1200px-wide photo does not shrink on its own -- setting max-width: 100% and height: auto lets media scale down inside a fluid container without ever overflowing it or distorting its aspect ratio.
Example: Pillar Two: Flexible Media
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="https://placehold.co/1200x600" alt="Scales down without overflowing">Pillar Three: Media Queries
Media queries let you apply CSS conditionally based on viewport width (or other features), so you can restructure navigation, font sizes, or column counts at specific breakpoints rather than relying on fluid sizing alone to handle every layout change.
Example: Pillar Three: Media Queries
<style>
.nav {
font-size: 14px;
}
@media (min-width: 768px) {
.nav {
font-size: 18px;
}
}
</style>
<nav class="nav">Responsive nav text size</nav>How the Three Pillars Combine
A real responsive page rarely uses just one pillar -- a typical layout is fluid by default, uses flexible media everywhere, and drops in a media query only at the handful of points where the fluid approach alone produces an awkward layout, such as switching a horizontal nav to a stacked one.
Example: How the Three Pillars Combine
<style>
.container {
width: 90%;
background: #eef;
padding: 10px;
}
img {
max-width: 100%;
}
@media (min-width: 768px) {
.container {
width: 70%;
}
}
</style>
<div class="container">
<img src="https://placehold.co/600x300" alt="Fluid width, flexible media, and a media query together">
</div>Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: