Media Queries Not Working in Internet Explorer 11

Media Queries not working in Internet Explorer 11

instead

@media screen and (min-width: 1024px){
    ...
}

use this

@media all and (min-width: 1024px) {
    ... 
}

Media Queries not working in Internet Explorer 10

A few resources here on @media usage on Internet Explorer 11 and under.

Targetting Internet Explorer Best Practices
CanIUse @Media (Shows known issues with IE10)
Browser Compatability Best Practices.
IE10 Specific Styles (Some techniques)
IE10 CSS Hacks
IE10 vs Media Queries

Some people have been known to try tricks like below as well with success, but IE10 can be unforgiving. Note the prefixes and see the CanIUse Knowledge Objects.

@-ms-viewport {
width: device-width;
}

If that doesn't do the trick, you could try removing the screen parameter
and styling specifically for IE10 like so.

Per this article on targeting IE10, this little workaround exists since conditional comments aren't recognized since IE10.

@media (max-width: 575.98px)[data-useragent*='MSIE 10.0']{
     .layer-hover .plus {
         font-size: 2.5rem;
    }
     layer-hover-2 .plus[data-useragent*='MSIE 10.0'] {
         font-size: 2.5rem;
    }
     .layer-hover a[data-useragent*='MSIE 10.0']{
         width: 70%;
         padding: 5px 0;
         font-size: 10px;
    }
     .layer-hover-2 a[data-useragent*='MSIE 10.0'] {
         width: 70%;
         padding: 5px 0;
         font-size: 10px;
    }
}

Another possible hack you could try is mentioned on Mediacurrent with lots of success stories.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS here
}

Media queries not working in specific IE query

It looks like you are trying to target IE 10+, so try using the all selector instead of the screen selector.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
}

If you're trying to target IE 9 or below, you'll have to load a conditional stylesheet, like so:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

You can find more detail about this and other Microsoft browsers here:

how to detect IE and Edge browsers in CSS?

Media Queries not working in IE11 (Resolution problem)

According to the browser compatibility documentation, -moz-transform is not supported in IE. You should use transform instead. You can try to modify the css like this:

@media all and (max-width: 1366px) {
  .sizing{
    zoom: 0.65;
    transform: scale(0.85);
    -moz-transform: scale(0.85);
  }
}

@media Unknown on IE11

Try my code with updated doctype and html tags

<!doctype html>

<html lang="en">

<head>

<title>Foo</title>

<style type="text/css">

@media (min-width: 640px) {

  h1 {font-size:56px;color:#0f0;}

}

@media (max-width: 640px) {

  h1 {font-size:9px;color:#00f;}

}

</style>

</head>

<body>

<h1>Test</h1>

</body>

</html>

Media queries not working with ie & phones

This problem has now been solved. After deleting and tweaking files and sifting through support forums for answers, I looked at the stylesheet. It turns out I was missing a closing bracket inside a media query.

/Facepalm...

Media Queries Not Working in Internet Explorer 11