3 ms·

A nice guide, but there's a problem with the responsiveness queries in my opinion. If you set your breakpoints at the boundaries of common resolutions (768, 10

A nice guide, but there's a problem with the responsiveness queries in my opinion. If you set your breakpoints at the boundaries of common resolutions (768, 1024, 1280, etc) you'll find that they're wrong in weird circumstances. Setting your 'tablet' query to 'min-width: 768px' because that works on an iPad 2 will fail on a Samsung Galaxy Tab running Chrome or an Amazon Fire 8 HD running Silk. It's far better to put the query near the middle of two resolutions eg 900px instead. Media queries should be generalized to cover the layout for devices up to that point, not specific to approximate real world devices. It makes life far simpler in the long run. Also, there are a lot more things you can query for: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...

lelandfe 4y ago
> It's far better to put the query near the middle of two resolutions eg 900px instead. Media queries should be generalized to cover the layout for devices up to that point I actually think that media queries shouldn't consider devices at all when writing styles, and should instead be unique and specific to the component. Build the component's smallest resolution first, and add a new `min-width` breakpoint when it looks weird as you scale it up. That's because there is no "middle of two resolutions." Today, there are so many device sizes, and there's no sense in designing your entire site around some random set of 5 of them. Assert that your site looks good on specific devices relevant to your demographic during QA.
sirshmooey 4y ago
Let the design dictate the media breakpoints. Targeting certain devices will drive you to madness. Today’s common resolutions may not be tomorrow’s.
scyzoryk_xyz 4y ago
This was what I was hoping for with this article - unique or surprising applications

lelandfe 4y ago

> It's far better to put the query near the middle of two resolutions eg 900px instead. Media queries should be generalized to cover the layout for devices up to that point I actually think that media queries shouldn't consider devices at all when writing styles, and should instead be unique and specific to the component. Build the component's smallest resolution first, and add a new `min-width` breakpoint when it looks weird as you scale it up. That's because there is no "middle of two resolutions." Today, there are so many device sizes, and there's no sense in designing your entire site around some random set of 5 of them. Assert that your site looks good on specific devices relevant to your demographic during QA.

sirshmooey 4y ago

Let the design dictate the media breakpoints. Targeting certain devices will drive you to madness. Today’s common resolutions may not be tomorrow’s.

scyzoryk_xyz 4y ago

This was what I was hoping for with this article - unique or surprising applications