marcelo_mozart

Boa noite! Preciso de ajuda... Estou fazendo o código de responsividade, o código para telas grandes eu já fiz, agora estou trabalhando no programação do código para telas pequenas. Eu tenho uma lista que possui imagens nas <li>, porém quando for resolução menor (480px) eu quero que as imagens mudem para outras. Exemplificando: Código para resolução minima de 760px: <section id="body-whats"> <ul> <li><a href="link" target="_blank"><img src="imagem 1"></a> <li><a href="link" target="_blank"><img src="imagem 2"></a> <li><a href="link" target="_blank"><img src="imagem 3"></a> </ul> </section> Código para resolução minima de 480px: Para resolução menor eu quero trocar as imagens: imagem 1 imagem 2 imagem 3 por imagem x imagem y imagem z Como poderia fazer isso usando apenas html e CSS? OBS: Nas DIVs que eu tenho imagens, eu consegui fazer a mudança de imagem com o seguinte atributo: <picture> <source media="(max-width:480px)" srcset="../image/bg-phone.png"> <source media="(max-width:780px)" srcset="../image/bg-tablet.png"> <source media="(min-width:800px)" srcset="../image/bg-topo3.jpg"> <img src="../image/bg-topo3.jpg" width=100%> </picture>