08/01/2017

@mediaCSS|MDN

@media

Nossos voluntrios ainda no traduziram este artigo para o Portugus (do Brasil) . Junte-se a ns e ajude a fazer o trabalho!
Voc tambm pode ler o artigo em Portugus (Brasil) .

Resumo
O @media CSS at-rule associa um conjunto de instrues aninhadas, em um bloco CSS que delimitado por chaves, com uma condio denida por uma consulta de
mdia . O @media at-rule pode ser usado no somente no nvel superior de um CSS, mas tambm dentro de qualquer grupo condicional CSS-em-regra .
O @media at-rule pode ser acessado atravs da interface de modelo de objeto CSS CSSMediaRule .

Sintaxe
@media<mediaquerylist>{
<Grouprulebody>
}
Onde
<mediaquerylist>=<mediaquery>#

Onde
<mediaquery>=<mediacondition>|[not|only]?<mediatype>[and<mediaconditionwithoutor>]?

Onde
<mediacondition>=<medianot>|<mediaand>|<mediaor>|<mediainparens>
<mediatype>=<ident>
<mediaconditionwithoutor>=<medianot>|<mediaand>|<mediainparens>

Onde
<medianot>=not<mediainparens>
<mediaand>=<mediainparens>[and<mediainparens>]+
<mediaor>=<mediainparens>[or<mediainparens>]+
<mediainparens>=(<mediacondition>)|<mediafeature>|<generalenclosed>

Onde
<mediafeature>=([<mfplain>|<mfboolean>|<mfrange>])
<generalenclosed>=[<functiontoken><anyvalue>)]|(<ident><anyvalue>)

Onde
<mfplain>=<mfname>:<mfvalue>
<mfboolean>=<mfname>
<mfrange>=<mfname>['<'|'>']?'='?<mfvalue>|<mfvalue>['<'|'>']?'='?<mfname>|<mfvalue>'<''='?<mfname>
'<''='?<mfvalue>|<mfvalue>'>''='?<mfname>'>''='?<mfvalue>

Onde
<mfname>=<ident>
<mfvalue>=<number>|<dimension>|<ident>|<ratio>

Uma <mediaquery> composta por um tipo de mdia opcional e / ou um nmero de recursos de mdia.

Tipos de mdia
todos
Adequado para todos os dispositivos.
impresso
Destinado a material paginado e documentos visualizados na tela no modo de visualizao de impresso. Consulte a seo sobre mdias paginadas e a seo de
mdia do tutorial Introduo para obter informaes sobre formatao de problemas especcos mdia paginada.
tela
Destinado principalmente para telas de computador a cores.
discurso

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FCSS%2F%

1/5

08/01/2017

@mediaCSS|MDN

Destinado a sintetizadores de voz. Nota: CSS2 tinha um tipo de mdia similar chamado "aural" para este propsito. Consulte o apndice nas folhas de estilo
auditivas para obter detalhes.

Nota: CSS2.1 e Media Queries 3 deniram vrios tipos de mdia adicionais ( tty , tv , projection , handheld , braille , embossed , aural ), mas foram obsoletos em Media Queries 4 e
no devem ser usados.

Recursos de mdia
Cada recurso de mdia testa para um recurso especco do navegador ou dispositivo.
Nome

Resumo

width

Largura da janela de visualizao

height

Altura da janela de exibio

aspectratio

Relao de largura-altura da janela de visualizao

orientation

Orientao da janela de visualizao

resolution

Densidade de pixels do dispositivo de sada

scan

Processo de digitalizao do dispositivo de sada

grid

O dispositivo uma grade ou bitmap?

updatefrequency

overflowblock

Com que rapidez (se possvel) o dispositivo de sada pode modicar a

aparncia do contedo
Como o dispositivo de sada manipula o contedo que transborda a
viewport ao longo do eixo do bloco?

overflowinline

O contedo que transborda a viewport ao longo do eixo inline pode ser

rolado?

color

Nmero de bits por componente de cor do dispositivo de sada, ou zero

se o dispositivo no for de cor.

colorindex

displaymode

Notas

Adicionado em consultas de mdia Nvel 4

Adicionado em consultas de mdia Nvel 4

Adicionado em consultas de mdia Nvel 4

Nmero de entradas na tabela de pesquisa de cores do dispositivo de

sada ou zero se o dispositivo no usar essa tabela.
O modo de exibio do aplicativo, conforme especicado no membro de

Denido na especicao de manifesto de aplicativo da

exibio do manifesto de aplicativo da web.

Web .

monochrome

Bits por pixel no buer de quadros monocromticos do dispositivo de

sada ou 0 se o dispositivo no for monocromtico.

invertedcolors

O agente do usurio ou o sistema operacional subjacente investe cores?

Adicionado em consultas de mdia Nvel 4

pointer

O mecanismo de entrada principal um dispositivo apontador e, em caso

armativo, qual a preciso?

Adicionado em consultas de mdia Nvel 4

hover

anypointer

O mecanismo de entrada primria permite que o usurio passe o mouse

sobre os elementos?
Algum mecanismo de entrada disponvel um dispositivo apontador e,
em caso armativo, qual a preciso?

Adicionado em consultas de mdia Nvel 4

Adicionado em consultas de mdia Nvel 4

anyhover

Qualquer mecanismo de entrada disponvel permite que o usurio passe

o mouse sobre elementos?

Adicionado em consultas de mdia Nvel 4

lightlevel

Nvel de luz ambiente atual

Adicionado em consultas de mdia Nvel 4

scripting

O script (por exemplo, JavaScript) est disponvel?

Adicionado em consultas de mdia Nvel 4

devicewidth

Largura da superfcie de renderizao do dispositivo de sada

Desativado em Consultas de mdia Nvel 4

deviceheight

Altura da superfcie de renderizao do dispositivo de sada

Desativado em Consultas de mdia Nvel 4

Relao de largura-altura do dispositivo de sada

Desativado em Consultas de mdia Nvel 4

Nmero de pixels fsicos do dispositivo por pixel CSS

No padro; WebKit / Blink especco. Se possvel, use o

recurso de mdia de resolution em vez disso.

As transform CSS 3D transform suportadas?

No padro; WebKit / Especicaes de Blink

As transform CSS 2D transform suportadas?

No padro; WebKit especco

deviceaspect
ratio
webkitdevice
pixelratio
webkit
transform3d
webkit
transform2d

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FCSS%2F%

2/5

08/01/2017

@mediaCSS|MDN

Nome
webkit
transition
webkit
animation

Resumo

Notas

A transition CSS suportada?

No padro; WebKit especco

A animation CSS suportada?

No padro; WebKit especco

Exemplos
@mediaprint{@mediaprint{

1
2

body{fontsize:10pt}Corpo{fontsize:10pt}
}}

@mediascreen{@mediascreen{

4
5

body{fontsize:13px}Corpo{fontsize:13px}
}}

6
7

@mediascreen,print{@mediatela,imprimir{
body{lineheight:1.2}Body{lineheight:1.2}

}}

9
10

@mediaonlyscreen@Apenasecrmultimdia
and(mindevicewidth:320px)E(mindevicewidth:320px)

11
12

and(maxdevicewidth:480px)E(larguramximadodispositivo:480px)
and(webkitmindevicepixelratio:2){E(webkitmindevicepixelratio:2){

13

body{lineheight:1.4}Body{lineheight:1.4}

14
15

}}

Especicaes
Especicao

Status

Padro de Compatibilidade Web

A denio de 'CSS Media Consultas' nessa

LS

Comente

Padro de vida

Padroniza os recursos de mdia webkitdevicepixelratio e webkittransform3d .

especicao.

Nvel de Mdulo de Regras

Condicionais CSS 3

CR Recomendao do
candidato

A denio de @media nessa

Dene a sintaxe bsica da regra @media .

especicao.

scripting , pointer , hover , lightlevel , updatefrequency , overflowblock , e

Consultas de mdia Nvel 4

A denio de @media nessa

Rascunho de
Trabalho
WD

especicao.

Consultas de mdia

A denio de @media nessa

recursos de mdia overflowinline .

Obsoleta todos os tipos de mdia, exceto para screen , print , speech , e all .
Tornou a sintaxe mais exvel, adicionando, entre outras coisas, a palavra-chave or .

RE C

Recomendao

Nenhuma mudana.

RE C

Recomendao

Denio inicial.

especicao.

CSS Nvel 2 (Reviso 1)

A denio de @media nessa

especicao.

Compatibilidade do navegador
rea de Trabalho

Mobile

Caracterstica

Android

Suporte bsico ( all , print , screen ) 1,0

Firefox Mobile (Gecko) IE Mobile

Opera Mobile Safari Mobile

1,0 (1,7)

9.0

(Sim)

3.1

speech

Sem suporte Sem suporte

Sem suporte 9,0

Sem suporte

Recursos de mdia

1,0

1,0 (1,7)

(Sim)

9,0

3.1

Recurso de mdia de displaymode

(Sim)

Veja tambm
Consultas de mdia
O CSSOM CSSMediaRule associado com esta at-rule.

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FCSS%2F%

3/5