Glossary

Responsive Design

Responsive design is a layout approach where a page displays correctly at any screen size — from a smartphone to a large monitor. Around 60% of internet traffic is now mobile.

Key tools

Fluid Grid — relative units (%, fr) instead of fixed pixels
Flexible Images — max-width: 100%, <picture> with different src for different sizes
Media Queries — CSS rules applied at specific screen widths

Breakpoints

/* Mobile first */
.container { padding: 16px; }

@media (min-width: 768px) {
  .container { padding: 24px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; margin: 0 auto; }
}

Mobile First vs Desktop First

Mobile First — base styles for mobile, expanded for larger screens (min-width). The recommended approach: forces you to think about the most important content first.