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.