6 ms·
Ask HN: What's your biggest gripe with CSS Media Queries?
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?
- dexwiz 10y agoI 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 10y agoThanks 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 10y agoNot 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 10y agoI feel you on this. Being certain/definitive about your media queries is an impossible expectation.
- LarryMade2 10y agoWatch 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 10y agoGreat! 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.