CSS (Cascading Style Sheets)

Mobile-first

@media queries should favor min-width

  • Max-width queries come into play when you want styles to be constrained below a certain viewport size. A combination of both min-width and max-width media queries will help to constrain the styles between two different viewport sizes.

min-width: 800px => "these styles will apply once you hit 800px" max-width: 1200px => "these styles no longer apply once you hit 1200px"

E Resources

Writing mobile-first CSS: good examples


Children
  1. CSS Best Practices
  2. CSS Rendering
  3. Elements
  4. Flexbox
  5. Layout
  6. Prop

Backlinks