Gostaria de entender para que serve o seletor @media
no CSS, pois tenho encontrado em vários códigos e queria saber se tem uma especialidade.
2 Respostas
O @media
conhecido como media-query seria uma condição ao qual você pode especificar um equipamento, tamanho, resolução, formato, rotação, etc.
O uso é simples:
@media(<condição>) {
<css desejado para a condição>
}
O @media
dependendo do navegador suporta até funcionalidades a mais, por exemplo, suportados somente no IE10+:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/*Aplica o estilo em navegadores IE10+ */
}
Assim que possivel irei enumerar as propriedades para media-query exclusivas de cada navegador/motor
Operadores lógicos
Você pode compor media queries complexos usando operadores lógicos, incluindo and
, only
e not
.
O operador
and
é usado para combinar múltiplas funcionalidades em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro.O operador
only
é usado para aplicar um estilo apenas se a query inteira for igual, útil para prevenir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadoresnot
ouonly
, você tem que especificar um tipo de media explícito.O operador
not
é usado para negar uma media query inteira.
Você também pode combinar múltiplas media queries em uma lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira, isto é equivalente a um operador or
.
Tipos de @media
all
que rodará em qualquer dispositivoprint
irá rodar no preview de impressão e no momento de imprimir será renderizado como neste formatoscreen
destinado a monitores convencionaisspeech
destinado a sintetizadores de fala.
Funcionalidades para o @media
width
- Largura do viewportheight
- Altura do viewportaspect-ratio
- Em base do aspeto ratio da largura para a altura do view-portorientation
- Orientação do viewport (geralmente baseado pela largura e altura)resolution
- Densidade dos pixels do dispositivoscan
- Funciona conforme o processo de escaneamento do dispositivo (por exemplo dependo do frames)grid
- Se o dispositivo usa grid ou tela bitmapupdate
- Com que frequência o dispositivo de saída pode modificar a aparência do conteúdo (Level 4 Media Queries)overflow-block
- Como o dispositivo de saída manipula o conteúdo que transborda a viewport ao longo do eixo do bloco (Level 4 Media Queries)overflow-inline
- O quanto o conteúdo que transborda a viewport ao longo do eixo em linha pode ser rolado (Level 4 Media Queries)color
- Número de bits por componente de cor do dispositivo de saída, ou zero se o dispositivo não for "color-gamut" colorido. Alcance aproximado das cores que são suportadas pelo agente do usuário e pelo dispositivo de saída (Level 4 Media Queries)color-index
- Número de entradas na tabela de pesquisa de cores do dispositivo de saída ou zero se o dispositivo não usar essa tabeladisplay-mode
- O modo de exibição do aplicativo, conforme especificado no membro de exibição do "manifest" (é um arquivo) do aplicativo da Webmonochrome
- Bits por pixel no dispositivo de saída é buffer de quadro monocromático, ou zero se o dispositivo não for monocromáticoinverted-colors
- Conforme user-agent ou as cores invertidas do sistema operacional são subjacente ou não (Level 5 Media Queries)pointer
- O mecanismo de entrada principal é um dispositivo apontador e, em caso afirmativo, quão preciso for (Level 4 Media Queries)hover
- O mecanismo de entrada primário permite ao usuário passar o mouse sobre elementos (Level 4 Media Queries)any-pointer
- Qualquer mecanismo de entrada disponível é um dispositivo apontador e, em caso afirmativo, qual for a precisão (Level 4 Media Queries)any-hover
- Algum mecanismo de entrada disponível permite ao usuário passar o mouse sobre elementos (Level 4 Media Queries)light-level
- Nível de luz do ambiente (Level 5 Media Queries)scripting
- Se scripts estiverem ou não habilitados em seu navegador (por exemplo javascript), pode usar onot
para informar que o site só funciona com JS ou habilitar alternativas acaso não tenha (Level 5 Media Queries)
Nota: As media-querys também podem ser aplicadas aos elementos <link>
, por exemplo:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="arquivo.css">
E também podem ser aplicados em css adicionados por @import
, assim:
@import url("fineprint.css") print; /*aplica no preview de impressão ou no momento de gerar a impressão*/
@import url("bluish.css") projection, tv; /*aplica em projetos e televisores, provavelmente segunda tela conectada*/
@import "common.css" screen, projection; /*aplica tanto na tela principal quanto em projetores*/
@import url('landscape.css') screen and (orientation:landscape); /*aplica na primeira tela desde que a orientação esteja em landscape*/
Conclusão
Então @media
vai muito além de largura e altura, com @media
você pode combinar várias funcionalidades, operadores, criar condições especificas e obter efeitos variados conforme a necessidade.
@media funciona para você determinar um estilo CSS para cada tipo de mídia que te interessar.
Os mais comuns de se ver são os @media screen
e @media print
, um é para determinas o CSS para telas e o outro para determinar um CSS apenas quando for imprimir a página.
Vc também pode ter um CSS apena para TV @media tv
A formatação básica seria assim
@media not|only mediatype and (media feature) {
aqui vc coloca os estilos
}
Mas vc também pode importar o CSS específico para o media query que quiser
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
Os and|not|only servem para vc determinar que o CSS só vai influenciar ou não determinado tipo de midia.
Aqui tem uma lista pra vc consultar os media feature: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Outro link de referência: https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media
Veja um exemplo:
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
body {background: #ffffff}
}
Aqui quer dizer que apenas quando a Orientação da tela for na vertical e a largura em pixels da View Port estiver entre 481px e 1024px a cor de fundo vai ser branca.
Outro para impressão:
@media print {
body {background: #ffffff, color: #000000}
}
Aqui o CSS só vai ser aplicado quando em modo de impressão e vai colocar o fundo branco e a fonte preta.