Listas e responsividade
14/04/2020
0
Pessoal, boa noite!
Estou trabalhando no código de responsividade. Já fiz o código para resoluções grandes, agora preciso ajustar para tamanhos menores.
Eu fiz uma lista e nessa lista coloquei imagens. Para que essa imagens sejam substituídas por outras em uma resolução menor, como posso fazer. Segue exemplificação:
<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>
======================================================
Agora eu quero que na resolução 480px as imagens sejam outras:
<section id="body-whats">
<ul>
<li><a href="link" target="_blank"><img src="imagem x"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
</ul>
</section>
=====================================================
Eu já fiz esse tipo de ajuste com DIV, onde, na mudança de resolução eu conseguia apontar imagens diferentes, através do atributo <srcset>
Mas com lista eu não consegui encontrar nenhum indicativo ou ajuda para fazer o código.
Estou trabalhando no código de responsividade. Já fiz o código para resoluções grandes, agora preciso ajustar para tamanhos menores.
Eu fiz uma lista e nessa lista coloquei imagens. Para que essa imagens sejam substituídas por outras em uma resolução menor, como posso fazer. Segue exemplificação:
<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>
======================================================
Agora eu quero que na resolução 480px as imagens sejam outras:
<section id="body-whats">
<ul>
<li><a href="link" target="_blank"><img src="imagem x"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
</ul>
</section>
=====================================================
Eu já fiz esse tipo de ajuste com DIV, onde, na mudança de resolução eu conseguia apontar imagens diferentes, através do atributo <srcset>
Mas com lista eu não consegui encontrar nenhum indicativo ou ajuda para fazer o código.
Marcelo Mozart
Curtir tópico
+ 0
Responder
Posts
16/04/2020
Vinicius
Usando media query, por ex:
<section id="body-whats">
<ul class="desktop">
<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>
<ul class="mobile">
<li><a href="link" target="_blank"><img src="imagem x"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
</ul>
</section>
no CSS coloque:
@media(min-width:700px){
.mobile{
display:none;
}
}
@media(max-width:701px){
.desktop{
display:none;
}
}
Você pode visualizar e alterar o exemplo neste link
https://codepen.io/vczb/pen/PoPNpXQ
Espero ter ajudado.
Abraço
<section id="body-whats">
<ul class="desktop">
<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>
<ul class="mobile">
<li><a href="link" target="_blank"><img src="imagem x"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
</ul>
</section>
no CSS coloque:
@media(min-width:700px){
.mobile{
display:none;
}
}
@media(max-width:701px){
.desktop{
display:none;
}
}
Você pode visualizar e alterar o exemplo neste link
https://codepen.io/vczb/pen/PoPNpXQ
Espero ter ajudado.
Abraço
Responder
Clique aqui para fazer login e interagir na Comunidade :)