Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use?
Digging Deep into Media Queries with Alex Trost of Frontend.horse
On the Frontend horse Livestream (Which I highly recommend you subscribe to!) I joined Alex Trost to take a look at the Frontend.horse site to add support for the many different user preference media queries that exist now: prefers-color-scheme, prefers-reduced-motion, prefers-reduced-data, prefers-contrast and forced-colors.
We go into what each of the media queries does and what you should change for them, but we also go over why you make those changes. It was nice to be able to take the time exploring the impact of some changes and the effect that they have. Streams with Alex are always super fun, and this was no exception!
For a full overview of all media queries check out the Complete guide to CSS media queries that I always keep updated. It’ll take you 20+ minutes to read it front-to-back, but it’s also an excellent reference guide.
For reduced data, check out Creating websites with prefers-reduced-data, which looks at all the things you can do to reduce data.
Lastly, we used Polypane extensively because it makes it really easy to toggle different media queries. You can try it for free here: Try Polypane for free.
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!