CSS media queries not working with IE7, IE8

I have worked with media queries on a project for a while and notice that it is not actually working well in IE 7 or IE 8.

Here is a simple sample of the media query I have.

@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);

To make sure things working alright in those browsers, you will need a separate css file for those two. And a detection of “if it is less than IE9”, use the “style-ie.css”

<link rel="stylsheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>

LESS css & media queries for a responsive design with Bootstrap

Using media queries in a single file, we can support multiple devices with different screen sizes.

Bootstrap doesn’t automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file
    Set up different styles in groups to show or hide contents by devices
        // Landscape phones and down
        @media (max-width: 480px) { ... }
        // Landscape phone to portrait tablet
        @media (max-width: 767px) { ... }
        // Portrait tablet to landscape and desktop
        @media (min-width: 768px) and (max-width: 979px) { ... }
        // Large desktop
        @media (min-width: 1200px) { ... }