CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Media Queries

Por Benedito Silva Júnior - publicado em 14/07/2016


Antes do surgimento dos smartphones e tablets os layouts de sites eram desenvolvidos levando em conta somente o tamanho das telas dos monitores de desktops. Nessa época não nos preocupávamos com resoluções e tamanhos de tela para desenvolver os nossos layouts, uma vez que todos acessavam a rede e navegavam pelos sites através do bom e velho PC.

Com a disseminação dos dispositivos móveis, e suas resoluções e tamanhos de tela diversificados, surgiu a necessidade de se desenvolver layouts que se adaptem aos seus displays.

O HTML foi desenvolvido para ser portátil, ou seja, ser interpretado por qualquer um desses novos dispositivos. O problema é que cada dispositivo exibe o HTML de forma distinta por conta da diversidade de tamanho de telas.

Para resolver este problema e facilitar a vida de nós desenvolvedores, surgiu o CSS, que é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento (Cascading Style Sheets - Wikipedia.org).

Com o CSS e as Media Queries podemos desenvolver sites responsivos, ou seja, que se adaptam aos diversos tamanhos de telas dos dispositivos móveis. Media Queries são ferramentas poderosas que tornam possível isso.

Exemplo de código:

@media screen and (min-width:500px) { nav { float: left; width: 20%; } section { margin-left: 20%; } } @media screen and (max-width:499px) { nav li { display: inline; } }

Os códigos acima torna o layout do site ajustável, que possui larguras baseadas em percentagens e exibe uma única coluna quando o a área de exibição do navegador diminuir, permitindo que o menu caiba na barra lateral.

As Media Types definem para qual tipo de media um certo código CSS é direcionado e mantém as páginas sempre adequadas a cada tipo de display.

Abaixo é mostrado a lista de Media Types existentes e suas suas funcionalidades:

AllPara todos os dispositivos
BraillePara dispositivos táteis
EmbossedPara dispositivos que imprimem em braile
HandheldPara dispositivos portáteis, geralmente com telas pequenas e banda limitada
PrintPara impressão em papel
ProjectionPara apresentações como PPS
ScreenPara monitores ou dispositivos com telas coloridas e resolução adequada
Speech Para sintetizadores de voz. As CSS 2 tem uma especificação de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores
TtyPara dispositivos que possuem uma grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e também dispositivos portáteis com display limitados
TvPara dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitados
ScreenPara apresentações como PPS

Os nomes das medias são todas case-sensitive, ou seja, letras maiúsculas e minúsculas são diferenciadas.

Nas Media Queries são utilizados três operadores lógicos: not, and e only.

not: se aplica em toda a media query e retorna verdadeiro, caso contrário retorna falso:

@media not all and (monochrome) { ... }

and: é usada para combinar múltiplas media features, bem como combinar media features com media types:

@media (min-width: 800px) { ... }

only: previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo