Did You Know? Media queries are part of CSS3 and allow web designers to customize CSS definitions for the layout depending on the device and screen width thereby creating a single Responsive Web Design that adapts to the visitors environment which is important, especially if you have a lot of visitors on mobile devices.

Unfortunately media queries like the following line were not supported in Internet Explorer 9 (IE9):

@media screen and (min-width:960px) and (min-device-width:960px) { style definitions here … }

If you are using a series of lines similar to this in your responsive website theme, you may be surprised what happens when someone visits your site using IE7 or IE8. There are a couple of solutions.

Fixed Width Default Settings

An easy solution is to include a series of default CSS definitions for a defined fixed browser width before any of the media queries. That way, modern browsers will simply override these settings.

Respond.js

Respond is JavaScript polyfill which adds support for basic CSS3 Media Queries for older versions of IE.

If you are planning on using HTML5, you may also want to consider including html5shiv in your site which adds support for many HTML5 tags to older non-html5 web browsers.

GitHub has an an extensive list of HTML5 and CSS3 cross browser Shim/Shiv and Polyfill libraries .

Related Posts: