Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Media Queries and Responsive Design

engineering.kablamo.com.au

Post reply on HN
Print view View original

11–20 of 50 posts

Re: Media Queries and Responsive Design

#11

Post by itsuka »

rado wrote: post #5

The author did a great job on that article. But please stop it with the 768px nonsense already. It makes no sense at all and is unnecessarily complicated. The breakpoints should be 600px, 900px etc https://www.freecodecamp.org/news/the-100-correct-way-to-do-...

I personally prefer sizes that are multiple of 8 because it works well with grid-based layouts and popular CSS libraries and design tools like Tailwind and Figma also adopt this system, although not strictly. However, I agree with your general sentiment that the exact number does not matter much. It will matter less even more when Container Queries become a common practice.

Re: Media Queries and Responsive Design

#12

Post by chrismorgan »

benatkin wrote: post #7
chrismorgan wrote: post #4

@media (max-width: 479.98px) This would be more accurately expressed with negation (though the difference will probably never matter to even a single human): @media not all and (min-width: 480px) This is using widest-compatible syntax, since WebKit only very recently (Safari 16.4) got the Media Queries Level 4 stuff to let you write it in clearer ways. The “not” applies to the remainder of the query: parse it as “not…

There's no need to mess with the breakpoints. They're chosen carefully. The article explains why this one works optimally: > Why 0.98px specifically? 0.02px is the smallest division of a CSS pixel that an earlier version of Safari supported. See WebKit bug #178261.

I’m confused by your defensiveness. What I express has the same browser support, but is correct (rather than leaving a tiny gap that is theoretically possible to encounter, though vanishingly improbable in reality), doesn’t depend on esoteric knowledge of the meaning of a 0.02px difference, and sticks with just the one magic number which is obviously desirable for various maintenance purposes. On the downside, “not all and (min-width: 480px)” is an idiosyncratic spelling, and you run the risk of people reaching for “not (min-width: 480px)” instead, which works in current browsers but sheds support for somewhat older browsers (with Safari being the last to get it, only a couple of months ago).

(In the wild, I’ve encountered exact-value overlap, which is obviously wrong and very easy to trigger, −1px, which is obviously wrong and fairly easy to trigger, −0.1px which is fairly safe, and −0.01px, but I don’t recall ever encountering −0.02px.)

If the article had used a negated media query, would you be arguing for using a non-negated .98?

Re: Media Queries and Responsive Design

#13

Post by kilian »

Nice overview, though I would advice against using device-specific breakpoints even beyond giving them device-specific names. Phones continue to get larger every year so designs made for 320px specifically started to become unoptimized when phones became 375px wide, and those in turn started becoming unoptimized when 414px became the norm, then iPhone 14 came out at 428px wide and that'll just continue.

The best strategy then is to let your site's content and layout guide where your CSS breakpoint should be, and designing for the _range_ between them.

If you want a full overview of CSS Media queries, I maintain an evergreen article with everything there is to know: https://polypane.app/blog/the-complete-guide-to-css-media-qu...

Re: Media Queries and Responsive Design

#16

Post by dontlaugh »

bruce343434 wrote: post #14

Why is it not a thing to query the literal screen size in cm? Instead we have to work with fake pixel measures and scaling factors and a whole bunch of bullshit and edge cases.

Or even more accurately, arcseconds at typical viewing distance. This would cover TVs and phones with the same measurement.

Re: Media Queries and Responsive Design

#17

Post by lapcat »

> To tell the browser that a site is providing an optimised experience for all viewport sizes, you can include the following meta tag in the document :

>

I see this a lot, but it's actually cargo culting, and all you need is initial-scale.

"You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation." https://developer.apple.com/library/archive/documentation/Ap...

Re: Media Queries and Responsive Design

#18

Post by pjc50 »

bruce343434 wrote: post #14

Why is it not a thing to query the literal screen size in cm? Instead we have to work with fake pixel measures and scaling factors and a whole bunch of bullshit and edge cases.

For desktop systems the EDID data is not always reliable. Besides, you don't want the screen size, you want the viewport size and the DPI.

Re: Media Queries and Responsive Design

#19

Post by [deleted] »

rado wrote: post #5

The author did a great job on that article. But please stop it with the 768px nonsense already. It makes no sense at all and is unnecessarily complicated. The breakpoints should be 600px, 900px etc https://www.freecodecamp.org/news/the-100-correct-way-to-do-...

[deleted]

Re: Media Queries and Responsive Design

#20

Post by zagrebian »

lapcat wrote: post #17

> To tell the browser that a site is providing an optimised experience for all viewport sizes, you can include the following meta tag in the document : > I see this a lot, but it's actually cargo culting, and all you need is initial-scale. "You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, S…

That’s Apple. What about Android?
Post reply on HN