Solucionado
Se eu quiser colocar uma imagem diferente no @media screen, o que tenho que colocar dentro do própria @media screen?
Por exemplo: Ao colocar 'AluraBooks' no layout 1024, colocamos 'displey: flex;' para faze-lô aparecer e ajusta-lo. O que colocaria para fazer aparecer uma imagem hipotética?
Oi Rafael!
Dentro do @media screen, você pode trocar a imagem usando a propriedade background-image (pra fundos) ou content (se for em pseudoelementos), ou simplesmente mudar o src de uma tag via CSS com display.
Exemplo com background-image: @media screen and (max-width: 1024px) { .sua-classe { background-image: url('imagem-nova.png'); } } Se for uma , o mais comum é esconder uma e mostrar outra: .img-desktop { display: block; } .img-mobile { display: none; }
@media screen and (max-width: 1024px) { .img-desktop { display: none; } .img-mobile { display: block; } } Assim você troca a imagem conforme a tela.
Entendi, muito obrigado!