Consultas de média

Consultas de média permitem adaptar o seu site ou aplicação de acordo com diferentes características ou parâmetros dos dispositivos utilizados.

São um elemento chave de desenho adaptável . Por exemplo, uma consulta de média pode reduzir o tamanho do texto em dispositivos pequenos, aumentar o espaço entre parágrafos quando a página é visualizada em modo de paisagem, ou ampliar os botões nos ecrãs táteis.

Em CSS, utiliza-se a regra "at" @media para aplicar, condicionalmente, parte de uma folha de estilos com base no resultado de uma consulta de média. E utiliza-se @import para aplicar, condicionalmente, uma folha de estilos inteira.

Em HTML, as consultas de média podem-se aplicar a vários elementos:

• No atributo media do elemento <link>. O valor deste atributo define os média a que se deve aplicar o recurso ligado (tipicamente, este recurso é um documento CSS).
• No atributo media do elemento <source> (apenas é válido quando este elemento está aninhado dentro de um elemento <picture>.). O valor deste atributo define quais os média que podem utilizar a imagem associada ao elemento.
• No atributo media do elemento <style>. O valor deste atributo define os média a que são aplicados os estilos.

Em JavaScript, pode-se usar o método Window.matchMedia() para verificar se a janela possui as características definidas na consulta de média. Também se pode utilizar MediaQueryList.addListener() para gerar eventos sempre que houver mudanças no resultado da consulta de média. Com estas funcionalidades, o seu site ou aplicação pode responder a mudanças na configuração, orientação ou estado do dispositivo.

Pode aprender mais sobre utilização programática das consultas de média no artigo Testar consultas de média.

Utilizar consultas de média

Introdução às consultas de média, a sua sintaxe, os operadores e funcionalidades utilizadas para construir as expressões das consultas de média.

Testar consultas de média programaticamente

Descrição de como utilizar consultas de média no código JavaScript code para determinar o estado do dispositivo, e como instalar listeners que notificam o código quando o resultado das consultas muda (por exemplo, quando o utilizador roda o ecrã ou redimensiona a janela do navegador).

Utilizar Consultas de média para Acessibilidade

Este artigo explica de que forma as consultas de média podem ajudar os utilizadores a compreender melhor o seu site.

• A regra @supports permite aplicar estilos em função da compatibilidade do navegador com diversas tecnologias CSS.