JQuery Responsivo: Melhor forma de chamar funções responsivas usando JQuery

Veja como é fácil usar JQuery Responsivo testando regras CSS redefinidas com Media Queries

Existem boas maneiras para manipular Javascript com o uso de CSS media Queries em um site responsivo. MediaCheck, jRespond, e Breakpoints.js permitem que vc chame funções javascript quando a largura da janela estiver em algum tamanho parametrizado.

O Problema: jQuery $(window).width() e CSS3 Media Queries nem sempre correspondem a mesma medida.

Sim, há uma pequena diferença entre os browsers na forma como eles tratam as barras de rolagem verticais. Essa diferença faz com que as media queries sejam ativadas em larguras diferentes em um browser e em outro.

Considere o código abaixo:

A Solução: Use o JQuery para testar mudanças em propriedades CSS, em vez de testar a largura do browser.

Em vez do que medir a largura da tela no redimensionamento da janela, é melhor testar uma regra CSS que foi modificada pela media query. Desta forma, não importa como o browser trata a barra de rolagem vertical, a media query será acionada ao mesmo tempo que o a função.

Imagine que a classe “classeExemplo” tenha um float:left. antes da media query, e um float:none depois. Ao redimensionar a janela, $(window).resize podemos testar a mudança nesta regra. Também precisamos testar a classe CSS no carregamento incial da página.

O jQuery

O CSS

 

Você achou este artigo útil? Deixe seu comentário!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *