HN Explorer

Ask HN: What's your biggest gripe with CSS Media Queries?

3 points by obihill ↗ HN
I'm currently finishing up with a complete re-write of a 2-year old JQuery plugin for Responsive Web Design (restive.js). It's going to lose the JQuery dependency and have a couple more nice features for modern Web design.

I've never used CSS Media Queries to build Responsive websites, primarily because I found them quite frustrating when I started learning Responsive Web design.

Still, I know a lot of folks use CSS Media Queries and I'd like to find out what your biggest issue with it is?

6 comments

[ 3.8 ms ] story [ 12.0 ms ] thread
dexwiz
I don't have a complaint, but I do have a piece of advice. Mobile-first design is real. Developers work largely on desktops, so they make the desktop version first. Then try to use media queries to apply mobile css using max-width. This seems sensible, but just does not seem to work out well. Instead do the unintuitive thing, design it for mobile first, and then scale up to tablet/desktop using min-width to apply styles.

No matter your choice, go one way. try to avoid mixing min/max-width and the cognitive load is way less.

obihill
Thanks for your feedback. Tradition is a hard thing to break. I've come across a number of websites that fit the viewport, but don't look quite right on mobile devices and I guess it's because of the way min/max-width works, especially in different orientations. Have you had any challenges here?
tmaly
Not really a complaint, but knowing what the minimal set of screen sizes to use to be the most useful to the most number of devices.
obihill
I feel you on this. Being certain/definitive about your media queries is an impossible expectation.
LarryMade2
Watch for iPhone retina and other hi-res devices that have resolution adjustments beyond the standard screen size.

Example query line

  @media only screen and (-webkit-min-device-pixel-ratio: 2) { ...
obihill
Great! Another thing to worry about. So happy I don't use them. I'm hoping we [as in the Web community] finds a better way to make mobile-friendly/responsive happen, and soon, because it's things like this that drive people crazy. Thanks for sharing.