Skip to main content

Media queries

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

Start by defining what should happen on small screen sizes first! Smaller screen sizes require simpler layouts. Then, adjust your styles to accommodate larger devices. If you design the complicated case first, then you have to work to try to make it simple again. source

https://responsively.app

Beginner's guide to media queries - https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

Also see Responsive design - https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

What Is Mobile First Design and Why It Is Important Today - https://www.mobileapps.com/blog/mobile-first-design

Breakpoints

https://material.io/design/layout/responsive-layout-grid.html#breakpoints

https://github.com/sw-yx/spark-joy#responsive-layout-breakpoints

Range media queries

https://developer.chrome.com/blog/media-query-range-syntax/