Criei um layout com menu de imagens porem quando coloco responsive ele

[Lozczn 0]

Criei um layout com menu de imagens porem quando coloco responsive ele não fica legal, gostaria de saber se tem como substituir a imagem conforme a tela diminui para texto. basicamente isso.

[xSmoking 6]

Você pode usar no css este código:

@media (min-width: 500px)  // pode usar min ou max width e vá controlando os pixels como quiser
{
     código css equanto min-width for 500px
}

[Lozczn 0]

 

Você pode usar no css este código:

@media (min-width: 500px)  // pode usar min ou max width e vá controlando os pixels como quiser
{
     código css equanto min-width for 500px
}

Então eu tenho isso no código mas a questão é que a imagem,teria que ser trocada por texto mesmo, ficaria mais complexo trocando a imagem por um texto.

[xSmoking 6]

Então eu tenho isso no código mas a questão é que a imagem,teria que ser trocada por texto mesmo, ficaria mais complexo trocando a imagem por um texto.

 

Mas e se você usar dois @media, um para a imagem com max-width: 700px e outro para o texto com min-width: 700px. AI enquanto for maior que 700 ele mostra a imagem, quando for menor, mostra o texto.

 

CSS

@media (max-width: 700px) {
    .image{
        display: none;
    }
}
@media (min-width: 700px) {
    .text{
        display: none;
    }
}

HTML

<img class="image" src="imagem.png" alt="" />
<span class="text">alguma coisa</span>

Este código troca a imagem pelo texto, mas eu não sei se a sua intenção é isso que eu fiz.

[VitorF 1]

Quando você diz "coloco responsive" o que isso significa? Talvez você não tenha entendido muito bem o conceito, o que está te atrapalhando em buscar a solução para o problema. Abraços.

[Lozczn 0]

Quando você diz "coloco responsive" o que isso significa? Talvez você não tenha entendido muito bem o conceito, o que está te atrapalhando em buscar a solução para o problema. Abraços.

Como assim atrapalho?

[Lozczn 0]

 

Então eu tenho isso no código mas a questão é que a imagem,teria que ser trocada por texto mesmo, ficaria mais complexo trocando a imagem por um texto.

 

Mas e se você usar dois @media, um para a imagem com max-width: 700px e outro para o texto com min-width: 700px. AI enquanto for maior que 700 ele mostra a imagem, quando for menor, mostra o texto.

 

CSS

@media (max-width: 700px) {
    .image{
        display: none;
    }
}
@media (min-width: 700px) {
    .text{
        display: none;
    }
}

HTML

<img class="image" src="imagem.png" alt="" />
<span class="text">alguma coisa</span>

Este código troca a imagem pelo texto, mas eu não sei se a sua intenção é isso que eu fiz.

 

vlw irmão era basicamente isso que procurava , e tão facil assim nunca imaginei .