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


Moderador: web

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

Ajustando layout pela largura da tela

03-06-2013 09:10

Hoje em dia, os sites podem ficar disponíveis para vários tipos de dispositivos. Computador, laptop, tablet e celulares.

Cada dispositivo tem uma resolução diferente, e pode ser necessário reajustar largura, esconder algum elemento, alterar o fundo da div, etc....

Vou postar abaixo um script bem simples, usando somente CSS para isso. Nesse exemplo, alguns elementos vão mudar a cor da borda, alterar tamanho, mudar largura e altura, esconder ou mostrar.

Qualquer dúvida, só perguntar.

<style> /* estilo inicial .tabela */ .tabela{ width:30%; float:left; margin:2px 2px; border:1px solid #cccccc; }   /* estilo inicial .menu1 */ .menu1{ width:30%; margin:2px 2px; border:1px solid #cccccc; }   /* estilo inicial .menu2 */ .menu2{ display:none; }   /* estilo inicial fundo */ .fundo{ background-image:url(imagem.gif); width:100px; height:100px; }   /* se a resolução for inferior a 800px */ @media screen and (max-width: 800px) {   /* estilo alterado .tabela */ .tabela{ margin:2px 2px; width:20%; float:none; border:1px solid black; }   /* estilo alterado menu1 */ .menu1{display:none;}   /* estilo alterado menu2 */ .menu2{display:block;}   /* estilo alterado fundo */ .fundo{ width:50px; height:50px; }   } /* fechamento do @media */ </style>


<div class="tabela">abcd</div> <div class="tabela">1234</div>   <br /><br />   <div class="menu1">a - b - c - d</div> <div class="menu2"><select><option></option></select></div> <div class="fundo"</div>

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]