Skip to content

Instantly share code, notes, and snippets.

Created September 29, 2022 10:06
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Key pillars of responsive design

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment