Key pillars of responsive design

responsive.md

Responsive Web Design Principles

1. Fluid Layouts

• Use %, vw, or, vh for elements that should adapt to the viewport.
• Use max-width instead of width
• Use responsive design patterns - Flexbox, Grid

2. Responsive Units

• Only use units that dynamically change with the viewport like %, rem.

3. Flexible images

• Use % to specify image dimensions alongside max-width.
• The easiest way is to use: img { max-width: 100%;}. This ensures that the image scales according to the parent container and prevents it from stretching when the container becomes larger than its absolute size.

4. Medias Queries

• Using @media rules to define layouts and styles at different viewports.