HTML/CSS
What is Responsive Design?
1 / 5

What is Responsive Design?

Websites that adapt to any screen size

code 
<meta name='viewport' content='width=device-width, initial-scale=1'>
Media Queries
2 / 5

Media Queries

Apply styles based on screen size

code 
@media (max-width: 768px) {
  .container { padding: 10px; }
}
Flexible Images
3 / 5

Flexible Images

Images that scale with their container

code 
img {
  max-width: 100%;
  height: auto;
}
Mobile-First
4 / 5

Mobile-First

Design for mobile, then scale up

code 
/* Mobile styles first */
@media (min-width: 768px) {
  /* Tablet+ styles */
}