Skip to content

Instantly share code, notes, and snippets.

@alvyynm

alvyynm/responsive.md

Created September 29, 2022 10:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alvyynm/ff439462ff4d717472d722c3ecf7a60c to your computer and use it in GitHub Desktop.
Save alvyynm/ff439462ff4d717472d722c3ecf7a60c to your computer and use it in GitHub Desktop.
Download ZIP
Key pillars of responsive design
Raw
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment