O que podemos fazer para fornecer um estilo CSS diferente, dependendo do tamanho da janela do navegador, isso tudo é possível? Com Media Types do CSS não é necessário que façamos mudanças tão drásticas no layout da página.
Existem duas maneiras de incluir a media query, a primeira é em um elemento de link:
<link rel="stylesheet" media="screen and (max-width: 980px)" href="example.css" />Ou dentro de um stylesheet:
@media screen and (max-width: 980px) { ... }Media types
Para que possamos manter nossas páginas sempre adequadas a cada tipo de visualização, utilizamos os media types, que são listados abaixo de acordo com sua utilização.
- : Para todos os dispositivos.
- : Para monitores ou dispositivos com telas coloridas e resolução adequada.
- : Para impressão em papel.
- : Para impressão em papel.
- : Para dispositivos táteis para visualização das letras no sistema braile.
- : Para dispositivos que imprimem em braile.
- : Para dispositivos portáteis, geralmente com telas pequenas e banda limitada.
- : Para apresentações como PPS.
- : Para sintetizadores de voz.
- : Para dispositivos que possuem uma grade fixa para exibição de caracteres.
- : Para dispositivos como televisores.
Media Feature
Para diferenciamos um dispositivo do outro, precisamos utilizar as características de cada um, para isso utilizamos as media features, que reconhecem certos recursos do dispositivo no qual está sendo visualizada a página.
- , , : Largura da viewport.
- , , : Altura da viewport.
- , , : Descreve o aspecto da relação da viewport. Este valor consiste de dois inteiros positivos separados por um caractere barra ("/"). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).
- , , : Largura do dispositivo de saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização).
- , , : Altura do dispositivo de saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização).
- , , : Descreve o aspecto da relação da viewport. Este valor consiste de dois inteiros positivos separados por um caractere barra ("/"). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).
- , , : Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.
- , , : Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.
- , , : Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.
- , , : Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).
- : Indica se a viewport é modo landscape ou portrait.
- : Descreve o processo de digitalização de dispositivos saída de televisão.
- : Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade, o valor é 1. De outro modo é zero.
Operadores Lógicos
Podemos compor media queries complexos usando operadores lógicos:
- : Usada para combinar múltiplas media features, bem como combinar media features com media types.
- : Gera uma sentença de negação.
- : Previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos.
- : Serve para usar varias medias juntas, podendo ser substituído por uma vírgula ",".
<link rel="stylesheet" href="example.css" media="screen and (max-width: 480px)" />No exemplo acima determinamos que o CSS apenas seja aplicado aos dispositivos de media screen e com resolução máxima de 480px.
Conclusão
Não há mais espaço para sites fixos que não funcionam bem em celulares. Pensar em Design Responsivo é pensar na experiência do usuário. E a utilização das medias queries é aliada de quem pretender fornecer a melhor experiência ao usuário.
Atualmente a grande maioria dos navegadores dão suporte, portanto você já pode começar agora.
0 Comentário
Deixe seu Comentário!