How to write CSS Media Queries for All Devices and Browsers (Including IE7 and IE8)


In CSS3, web developers/designers can define a media type such as screen or print, and specify the look of the content by setting conditions such as width, height, or orientation. A CSS media query combines a media type and a condition that shows how web content will appear on a particular device.

CSS Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, CSS media queries expand the role of the media attribute that controls how your styles are applied. For example, it’s been a common practice for years to use separate style sheet for printing web pages by specifying media=”print”.

CSS Media queries take this idea to the next level by allowing developers target styles based on a number of device properties, such as screen width, orientation, and so on. Following table demonstrates CSS media queries for all browsers in action. They all show the same web page as it’s viewed in a desktop browser, tablet or an iPod touch.

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.

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.
Notes :It doesn’t work on @import’edstylesheets

Write media query the following way:

Use keyword ‘and’ in query (‘or’ is not supported).

One thing must be noted is that the “screen” is necessary:

Thats’s it, if you have some other ideas on how to use CSS media queries feeel free to drop your ideas in the comments below. Have a great day.