Estou estudando alguma coisa em jQuery
para o caso.
É possível mudar uma imagem conforme a resolução da tela?
Por exemplo: no próprio navegador, com ele sem minimizar é a imagem grande. Se minimizar, a função troca para a imagem pequena.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeSim, é possível! Podes fazê-lo utilizando o método .width()
Descrição: O
.width()
obtem a largura atual calculada para o primeiro elemento no conjunto de elementos correspondentes apontados.
Neste caso o elemento correspondeste apontado será a window
, para obtermos a largura da janela/viewport:
$(window).width()
Depois iremos calcular se a largura do viewport é ou não maior que um valor que queiramos determinar, por exemplo:
if ($(window).width() > 500) {
alert('A largura da janela é menor que 500');
} else {
alert('A largura da janela é maior que 500');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Aqui tens também um exemplo no jsFiddle para veres este código em acção. Arrasta as bordas da secção de resultados diminuindo ou aumentando o tamanho da janela para veres a imagem a mudar.
Você pode colocar uma chamada para a sua função dentro do $(window).resize(function() { ... });
.
Sugiro usar document.body.scrollWidth
ao invés de $(window).width()
pois o primeiro pega a largura de dentro da tela descontando a barra de rolagem, borda do browser, etc.