CSS tricks has a new website and it's pretty (love the new gradient!) Some insights from the media queries. 🧵 https://twitter.com/chriscoyier/status/1343691032295333888
Chris seems to have developed this desktop-first, with the majority of media queries being `max-width`.
Breakpoints are all defined in pixels, not ems. The downside to px is that it doesn't scale when people zoom text in or out, making it easier to break the design with zoomed text.

If px are easier for you, build using px and then convert to em (1em = 16px, so divide by 16).
There are no combined media queries like "(max-width: 1000px) and (orientation: portrait)", which makes for a very clean progression and easy to check breakpoints.
The smallest media query is 400px wide. Right between regular iPhones and iPhones Max. Most sites I see tend to need breakpoints between 320 and 375 too, so the smallest breakpoint being at 400px is an indicator that the CSS is very resilient.
The largest breakpoint on the other hand is 1200px, and this is where the main area moves from a single column + sidebar to three columns + sidebar.
All in all, here are the breakpoints.

* max-width: 400px
* min-width: 600px
* max-width: 620px
* max-width: 650px
* max-width: 767px
* min-width: 768px
* max-width: 800px
* max-width: 830px
* max-width: 950px
* max-width: 1000px
* max-width: 1200px
There is a sneaky extra "breakpoint", the main areas all have a max-width of 1600px, effectively creating another breakpoint around that width.
I checked all of this in a few minutes using @polypane which parses the CSS automatically and can list the breakpoints and create screens from them with a single click. https://polypane.app 
Polypane, the perfect browser for developers and designers

All the tools you need to build responsive, accessible and fast sites five times faster. Try for free!

https://polypane.app
You can follow @kilianvalkhof.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
Those who think consciousness raising & movement building are disconnected, or even a distraction from electoral politics have not paid attention to the history of social change.In this thread, we
Read more
The 2020s will be known as the Remote Work decadeA few predictions of what is likely to emerge[ a thread ] Third Space: Office and Working from Home will
Read more
1/29: Have you ever had a concept explained to you that helps frame complex issues you’ve been wrestling with and opens your eyes to new possibilities? A concept that I
Read more
By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.