Doubt about @media

8

I made the front end of a site where your main layout was 1920px and I'm adapting to other screens, using:

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

I saw that IE8 is not working, is there any alternative to work around this?

    
asked by anonymous 21.02.2014 / 20:39

2 answers

7

IE8 does not support media queries, so what you can do is a fallback for this using this face:

link

And you can deploy to your front 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
 });
    
21.02.2014 / 20:52
8

I think IE8 does not support media queries:

link

Then it would have to be a javascript solution that would hear the window.onresize event, and for example, change the class attribute of body (eg something like class="width-600" , or class="width-1000" ) to simulate media queries. So you could put specific selectors in the CSS for each class assigned to body by the 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 are 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.

    
21.02.2014 / 20:42