Responsive Design Ingredients

Fluid Layouts

• To allow webpage to adapt to the current viewport width (or even height).
• Use % (or vh / vw) unit instead of px for elements that should adapt to viewport (usually layout).
• Use max-width instead of width.

Responsive Units

• Use rem unit instead of px for most lengths.
• To make it easy to scale the entire layout down (or up) automatically.
• Helpful trick: setting 1 rem to 10px for easy calculations.

Flexible Images

• By default, images don't scale automatically as we change the viewport.
• Always use % for image dimensions, together with the max-width property.

Media Queries

• Bring responsive sites to life!
• To change CSS style on certain viewport widths (called breakpoints).