Ie11 doesn't apply media queries style

问题

IE11 ignore my media queries and always using the mobile css.

the weird thing is that if i'll change the browser width, even for just 1-2 pixel, the browser will render itself and the media queries are shown.

i tried css lint and i have no errors in my css.

i have nothing special in my css. just plain css like this:

.div_example{
  width: 100px;
}

@media (min-width: 768px){
  .div_example{
    width: 300px;
  }
}

Has anyone encountered this problem?

回答1:

Had this exact thing occur. Just like you, if the window was resized the media queries would seemingly kick in. Was difficult to debug because opening up the developer console docked to the window also caused a resize and everything looked fine. Upon switching the developer console to a separate window I could see in the DOM explorer that the media queries were not applying.

Eventually I tracked it down to the media queries being inside of a style block that was in the body instead of the head. Relocating the style block to the head made IE11 correctly apply the media queries.

style in the body was not supported in IE11 (Using <style> tags in the <body> with other HTML) so it is not surprising there would be some weirdness.

回答2:

You have to define the screen types, e.g...

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

回答3:

It always use mobile styles because you are using:

@media (min-width: 768px)

This condition will be true if your window width is more than 768px, try this:

@media (max-width: 768px)

Styles inside that media query will be applied when window width is less than 768px and probably that's what you want to achieve.

来源：https://stackoverflow.com/questions/41536850/ie11-doesnt-apply-media-queries-style

标签

css

html5

internet-explorer-11