Responsivo CSS

Responsivo CSS

Você sabe que atualmente o celular e dispositivos moveis estão sendo cada vez mais utilizados pelos usuarios, e com isso, você deve ter um site responsivo, que nada mais é que um site que se adequá em todas as telas, de todos os tamanhos, e isso é muito simples de fazer, é possivel fazer com diversas formas, assim como com php, ou com media queries do css, vamos hoje aprender como se usa as media queries, que serve para fazer um responsivo css, vamos lá.

Media Queries

As media queries funcionam como um if da programação, ou seja, se a tela for maior que x pixels, esta div vai ter x propriedades, se for menor que x pixels, vai ter tal propriedades, muito simples, mas vamos entender isso na prática.

@media screen and (max-width: 500px)
{
	body {background-color: red;}
}

Aqui dizemos que se o screen que é nossa tela, for menor que no maximo 500px vai ter o body com background color red.

Media Link CSS

Também temos o valor que colocamos na chamada do link css, está aqui

<link rel="stylesheet" type="text/css" href="caminho/arquivo.css" media="all" />

Aqui temos os valores da media, que são esses

• all: usado para que o código CSS seja aplicado para todos os dispositivos.
• braile: para dispositivos táteis.
• embossed: para dispositivos que imprimem em Braille.
• handheld: para dispositivos de mão, celulares e outros dispositivos deste perfil. Normalmente com telas pequenas e banda limitada.
• print: para impressão em papel.
• projection: para apresentações, como PowerPoint. Este valor foi inventado pelo pessoal da Opera.
• screen: para dispositivos com telas coloridas e alta resolução.
• tv: para dispositivos como televisores, ou seja, com baixa resolução, com boa quantidade de cores e scroll limitado.

O ruim de usar este metodo é que nem todos os dipositivos reconhecem o handheld, como por exemplo o IPhone da Apple, a melhor solução é utilizar as media queries, como citada acima, pois com ela podemos ter uma maior liberdade e controle do nosso código de estilo para cada tela com cada um de seu tamanho.

Você pode conferir uma lista mais completa sobre todos os tipos de medias clicando neste link

Por enquanto é isso, para qualquer dúvida, deixe um comentário, ou entre em contato comigo que eu irei ajuda-lo com seu problema.