CSS Media Queries for All Devices and Browsers

Published on Author Code Father
Following table demonstrates CSS media queries for all browsers in action. CSS Media Queries for All Devices and Browsers
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}

/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Media Queries Support

CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on smartphones and other screen-based devices.

Although older versions of IE don’t support media queries, still there is a way you can make it work.

Even though everyone thinks that earlier versions of IE are already extinct, there is a great amount of people using them, her are some stats:

1 Chrome 37 24.85%
2 Safari 7 10.60%
3 Firefox 32 8.03%
4 Internet Explorer 11 7.31%
5 Chrome 36 5.62%
6 Android 4 3.94%
7 Firefox 31 3.91%
8 Internet Explorer 8 3.66%
9 Internet Explorer 9 3.08%
10 Internet Explorer 10 2.34%

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE.

Here is a great jQuery plugin called css3-mediaqueries. It’s very easy to use.

Download jQuery plugin and include downloaded script just before the </body> like this:


Or you can use the following way to include the script.


Then write media query in style sheet and check it in IE. It will work nicely with IE8, IE7, even in older versions IE6 or IE5.

Comments

comments