7

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.

0

2 Respostas 2

6

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 operadores not ou only, 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 dispositivo
  • print irá rodar no preview de impressão e no momento de imprimir será renderizado como neste formato
  • screen destinado a monitores convencionais
  • speech destinado a sintetizadores de fala.

Funcionalidades para o @media

  • width - Largura do viewport
  • height - Altura do viewport
  • aspect-ratio - Em base do aspeto ratio da largura para a altura do view-port
  • orientation - Orientação do viewport (geralmente baseado pela largura e altura)
  • resolution - Densidade dos pixels do dispositivo
  • scan - Funciona conforme o processo de escaneamento do dispositivo (por exemplo dependo do frames)
  • grid - Se o dispositivo usa grid ou tela bitmap
  • update - 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 tabela
  • display-mode - O modo de exibição do aplicativo, conforme especificado no membro de exibição do "manifest" (é um arquivo) do aplicativo da Web
  • monochrome - Bits por pixel no dispositivo de saída é buffer de quadro monocromático, ou zero se o dispositivo não for monocromático
  • inverted-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 o not 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.

6

@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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .