CSS3 Media Queries

[Anonymous]

I always use CSS3 media queries for make more responsive design, but a few days ago encountered problem about this, I used LG Mobile’s old browser and I saw that browser didn’t have support of media queries and I’m interesting about this, how to make for this browser, which haven’t support of CSS3 queries, how to detect screen resolution or browser size?

[Billy]

You can do it with JavaScript. There are some very good Media Query polyfills out there that people usually use on IE8.

This GitHub Wiki has a few: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Scroll down to about 80% of the page; it’s under “CSS, responsive design modules”

[georgearnall]

If you use mobile first responsive design. Then this shouldn’t matter. The mobile styles will be applied without media queries and tablet and desktop sizes will use media queries to build up there versions as they generally have more advanced / supporting browsers.

Plus, Compared with a desktop first responsive design (where it applies desktop styles and then degrades into mobile) in theory it should take the mobile less time to render the page with its smaller processor because it hasn’t got to apply and then remove the styles.

[Author]

Posts