CSS Responsive Design
Why Responsive Design?
Responsive design ensures your website looks great on all screen sizes — mobile, tablet, and desktop — without creating separate sites.
🔹 Media Queries
Use media queries to apply styles conditionally based on screen size.
✅ Syntax:
@media (max-width: 768px) {
.tutorials-card {
flex-direction: column;
}
}
Common breakpoints:
/* Mobile */
@media (max-width: 480px) {}
/* Tablets */
@media (max-width: 768px) {}
/* Desktops */
@media (min-width: 1024px) {}
You can also target device orientation:
@media (orientation: portrait) {}
🔹 Responsive Units
Prefer relative units like %
, em
, rem
, vw
, vh
over px
:
Unit | Description |
---|---|
% | Relative to parent |
em | Relative to current element font |
rem | Relative to root font size |
vw | 1% of viewport width |
vh | 1% of viewport height |
✅ Example:
.container {
width: 100%;
padding: 2vw;
font-size: 1.2rem;
}
🔹 Mobile-First Strategy
Start by writing base styles for mobile, then scale up using media queries.
/* Base styles: mobile */
.tutorials-section {
padding: 1rem;
font-size: 1rem;
}
/* Tablet and up */
@media (min-width: 768px) {
.tutorials-section {
padding: 2rem;
font-size: 1.1rem;
}
}
🖼️ Responsive Images
Make images scale with the layout and load the right version:
✅ CSS-only:
img {
max-width: 100%;
height: auto;
display: block;
}
✅ HTML Responsive Image:
htmlCopyEdit<picture>
<source media="(max-width: 768px)" srcset="img-small.jpg">
<source media="(min-width: 769px)" srcset="img-large.jpg">
<img src="img-large.jpg" alt="Responsive image">
</picture>
🔄 Fluid Layouts
Avoid fixed widths. Use max-width
, percentages, and flexible grid systems.
.tutorials-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 1rem;
}
For grids:
.tutorials-card-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
✅ Summary Covered
- Media queries with breakpoints
- Responsive CSS units
- Mobile-first strategy
- Responsive images via
<picture>
and CSS - Fluid layouts using flexible containers and CSS Grid