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.<p>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.<p>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?
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.<p>No matter your choice, go one way. try to avoid mixing min/max-width and the cognitive load is way less.
Watch for iPhone retina and other hi-res devices that have resolution adjustments beyond the standard screen size.<p>Example query line<p><pre><code> @media only screen and (-webkit-min-device-pixel-ratio: 2) { ...</code></pre>