Responsive Design
## Learning Objectives
- Understand responsive design principles
- Use media queries
- Implement mobile-first approach
- Master responsive typography and images
## Responsive Design Principles
1. **Fluid layouts** - use relative units
2. **Flexible images** - scale with container
3. **Media queries** - apply styles at breakpoints
## Viewport Meta Tag
Required for proper mobile rendering:
```html
```
## Media Queries
### Basic Syntax
```css
@media (condition) {
/* CSS rules */
}
```
### Breakpoints
```css
/* Small screens (mobile) */
@media (min-width: 576px) { }
/* Medium screens (tablet) */
@media (min-width: 768px) { }
/* Large screens (laptop) */
@media (min-width: 992px) { }
/* Extra large screens (desktop) */
@media (min-width: 1200px) { }
/* Extra extra large */
@media (min-width: 1400px) { }
```
### Max-width Breakpoints
```css
/* Up to and including mobile */
@media (max-width: 575.98px) { }
/* Up to and including tablet */
@media (max-width: 767.98px) { }
```
### Orientation
```css
/* Landscape */
@media (orientation: landscape) { }
/* Portrait */
@media (orientation: portrait) { }
```
## Mobile-First Approach
Write base styles for mobile, then add larger styles:
```css
/* Base styles (mobile) */
.container {
width: 100%;
padding: 0 15px;
}
.column {
width: 100%;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
}
.column {
width: 50%;
}
}
/* Desktop and up */
@media (min-width: 992px) {
.container {
width: 960px;
}
.column {
width: 33.333%;
}
}
```
## Relative Units
### Percentages
```css
.container {
width: 90%;
}
.column {
width: 100%;
}
```
### em vs rem
```css
/* em: relative to parent font size */
.text {
font-size: 1.5em; /* 1.5 times parent */
}
/* rem: relative to root font size */
.text {
font-size: 1.5rem; /* 1.5 times root (html) */
}
```
### vw and vh
```css
/* vw: 1% of viewport width */
.full-width {
width: 100vw;
}
/* vh: 1% of viewport height */
.hero {
height: 100vh;
}
/* Min height with scrolling */
.page {
min-height: 100vh;
min-height: 100dvh; /* Dynamic viewport height (newer) */
}
```
## Flexible Images
### Max Width
```css
img {
max-width: 100%;
height: auto;
}
```
### Object Fit
```css
.cover-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.profile-image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
```
### Background Images
```css
.hero {
background-image: url("image.jpg");
background-size: cover;
background-position: center;
}
```
## Responsive Typography
### Fluid Font Sizes
```css
/* Using clamp() */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
/* Using calc() */
h1 {
font-size: calc(1rem + 2vw);
}
```
### Scalable Line Height
```css
p {
font-size: 1rem;
line-height: 1.6; /* Unitless, scales with font-size */
}
```
## Responsive Navigation
### Mobile Menu
```html
```
```css
/* Mobile */
.menu-toggle {
display: block;
}
.nav-menu {
display: none;
flex-direction: column;
}
/* Desktop */
@media (min-width: 768px) {
.menu-toggle {
display: none;
}
.nav-menu {
display: flex;
flex-direction: row;
}
}
```
## Responsive Grid Systems
### Flexbox Grid
```css
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.col {
flex: 1;
padding: 0 15px;
}
.col-12 { flex: 0 0 100%; }
.col-6 { flex: 0 0 50%; }
.col-4 { flex: 0 0 33.333%; }
.col-3 { flex: 0 0 25%; }
```
### CSS Grid Grid
```css
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
```
## Container Queries
Newer approach - styles based on container size:
```css
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
```
## Responsive Tables
### Horizontal Scroll
```css
.table-wrapper {
overflow-x: auto;
}
```
### Card View
```css
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead {
display: none;
}
tr {
margin-bottom: 1rem;
border: 1px solid #ddd;
}
td {
padding-left: 50%;
position: relative;
}
td::before {
content: attr(data-label);
position: absolute;
left: 15px;
font-weight: bold;
}
}
```
## Testing
### Browser DevTools
- Chrome DevTools Device Toolbar
- Firefox Responsive Design Mode
### Online Tools
- BrowserStack
- LambdaTest
## Summary
- Always include viewport meta tag
- Use media queries for breakpoints
- Mobile-first: base styles for mobile, add styles for larger screens
- Use relative units (%, em, rem, vw, vh)
- Images: `max-width: 100%` and `object-fit: cover`
- Fluid typography with `clamp()` or `calc()`
- Test at multiple screen sizes
- Consider container queries for component-based responsive design
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →