Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como alterar a imagem de acordo com a resolução

20-01-2016 10:31

Nesse post vou mostrar um script CSS que permite alterar uma imagem de acordo com a resolução da tela.

Hoje em dia os sites podem ser vistos em diversos dispositivos, tablets, pc, celulares, etc.

As alterações no script abaixo é bem simples.
A primeira classe imagem é a que será mostrada somente no PC / computador

Já a classe imagem dentro de @media é a classe que será exibida somente em tablets ou celulares.

<style> /* somente no PC */ .imagem{ width:100px; height:100px; background-image:url('para_pc.jpg'); } /* somente em celular e tablet */ @media only screen and (max-width:767px){ .imagem{ width:100px; height:100px; background-image:url('para_tablet_celular.jpg'); } } </style> <div class="imagem"></div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado