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.
Consultas de média em HTML
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.
Consultas de média em JavaScript
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.
Referências
Regras "at"
Guias
- 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.
Especificações
Specification | Status | Comment |
---|---|---|
Media Queries Level 5 | Editor's Draft | |
CSS Conditional Rules Module Level 3 | Candidate Recommendation | |
Media Queries Level 4 | Candidate Recommendation | |
Media Queries | Recommendation | |
CSS Level 2 (Revision 1) | Recommendation | Definição inicial |
Compatibilidade com navegadores
@media rule
BCD tables only load in the browser
Ver também
- A regra
@supports
permite aplicar estilos em função da compatibilidade do navegador com diversas tecnologias CSS.