8

fiz o front-end de um site, no qual seu layout principal estava em 1920px e estou adaptando para outras telas, utilizando:

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

Vi que no IE8 não está funcionando, existe alguma alternativa para contornar isso?

2
  • 3
    Abandonar o IE8 de vez!:)
    – v42
    Commented 21/02/2014 às 23:19
  • 1
    Teria que dizer isso à todos os usuários, hehe. Commented 24/02/2014 às 12:26

2 Respostas 2

8

Acho que o IE8 não suporta media queries:

http://caniuse.com/css-mediaqueries

Então teria de ser uma solução javascript que ouvisse o evento window.onresize, e por exemplo, alterasse o atributo class do body (e.g. algo como class="width-600", ou então class="width-1000"), para simular media queries. Assim você poderia colocar no CSS seletores específicos para cada classe atribuída ao body pelo 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 */
}

Se estiver usando 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");
);

A classe width-1000plus é para quando a largura for maior que 1000 pixels.

2
  • eu achei um pouco complicado. Existe alguma forma de eu apenas incluir a classe/regra, se tal elemento ultrapassar 1290px? Commented 3/04/2014 às 16:04
  • if (w > 1200) $body.addClass("width-1200p"); Commented 3/04/2014 às 16:11
7

O IE8 não suporta media queries, então o que você pode fazer é um fallback para isto utilizando este cara:

https://github.com/scottjehl/Respond

E você pode implementar no seu front de duas maneiras:

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

Ou utilizando o Modernizr e verificando o suporte do Browser para media queries

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .