Doubt about @media

Question

made the front-end of a site, in which its main layout was at 1920px and I am adapting to other screens, using:

@media (min-width: 0px) and (max-width: 1920px) {}

I saw that in IE8 is not working, there is some alternative to circumvent this?

Answer 1

I think IE8 doesn’t support media queries:

http://caniuse.com/css-mediaqueries

So it would have to be a javascript solution that listens to the event window.onresize, and for example, change the attribute class of body (e.g. something like class="width-600", or else class="width-1000"), to simulate media queries. So you could put in the CSS selectors specific to each class assigned to body by script:

.width-600 seletor {
    /* estilos para seletor quando a resolução for até 600 */
}

.width-1000 seletor {
    /* estilos para seletor quando a largura for de 600 até 1000 */
}

If you’re using jQuery:

$(window).resize(
    /* função de redimensionamento */
    var w = $(window).width(),
        $body = $("body");
    $body.removeClass("width-600 width-1000");
    $body.addClass(w <= 600 ? "width-600"
        : w <= 1000 ? "width-1000"
        : "width-1000plus");
);

The class width-1000plus is for when the width is greater than 1000 pixels.

Answer 2

IE8 does not support media queries, so what you can do is a fallback to it using this guy:

https://github.com/scottjehl/Respond

And you can implement on your front in two ways:

<!-- Respond.js IE8 support media queries -->
<!--[if lt IE 9]>
  <script src="<path>/respond.min.js"></script>
<![endif]-->

Or using Modernizr and checking Browser support for media queries

Modernizr.load({
   test: Modernizr.mq('only all'),
       nope: <path>/respond.min.js
 });