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

CSS3 keeps on impressing and frustrating web designers and developers. It brings a lot of possibilities and resolves a lot of problems. However, there happen to be some drawbacks in CSS3 still annoying the tech geeks. This is where CSS media queries may come in handy. But, before moving further to consider the advantages they bring, let’s start with determining what media queries are.

Simply put, media queries define the modules in CSS3 which enables rendering so that the content adapts to different conditions like screen resolution. Media query is built on media type and one or more expressions that include media features. The latter determines if the result of the query is true or false. Generally, media queries allow for creating responsive layouts and adapt them to users who browse from different devices without changing the content.

With CSS media queries defined, it’s time to consider them in action.

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 a 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.

There's a thing about media queries, you don't need to use them if you opt for a ready-made website template that is already optimized for all possible devices and screen resolutions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* 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:

1Chrome 3724.85%
2Safari 710.60%
3Firefox 328.03%
4Internet Explorer 117.31%
5Chrome 365.62%
6Android 43.94%
7Firefox 313.91%
8Internet Explorer 83.66%
9Internet Explorer 93.08%
10Internet Explorer 102.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:

1
<script src="js/css3-mediaqueries.js"></script>

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

1
2
3
4
<!-- css3-mediaqueries.js for IE less than 9 -->
<!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

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:

1
2
3
4
@media screen and (min-width: 980px)
{
/* CSS Document */
}

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

One thing must be noted is that the "screen" is necessary:

1
2
@media (min-width: 481px) { /* ... */ } will not work, it must be
@media screen and (min-width: 481px) { /* ... */ }

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.


website templates


FAQ

What is the CSS3 media query?

It is a function, added in CSS3 which allows the user to define the conditions when some rules will be used. For example, it allows changing the layout when the width of the screen becomes smaller. Or to download the file with printing properties only when users want to print something.

Why do I need to use CSS3 media queries?

They allow adapting the content of your website to the specific device and browser so that all the users will have the best possible experience.

What browsers support the CSS3 media queries?

Internet Explorer (IE) version 9+, Firefox 3.5+, Safari 3+ and Opera 7+.


Read Also

CSS3 Cheat Sheet for Dummies Learning to Code

How To Make Stylish Checkboxes And Radio Buttons With CSS3

Free CSS3 Hover Effects to Copy and Paste

Custom CSS3 & jQuery Toggle Search Form: Tutorial


Ahmed Faisal

How to make your website responsive and how to work with Bootstrap like a pro? Check out in Ahmed's articles.