consulta @media CSS3

Exemplos

Se o documento de largura inferior a 300 pixels é modificar a apresentação de fundo (background-color):

tela @media e (max-width: 300px) {
body {
background-color: lightblue;
}
}

Definições e uso

Use @media consultas, você pode definir diferentes estilos para diferentes tipos de mídia.

@media pode ser definido para a tela tamanhos diferentes estilos diferentes, especialmente se você precisa definir as páginas de resposta de projeto, @ media é muito útil.

Quando você redefinir o tamanho do navegador do processo, a página será re-processar a página com base na largura e altura do navegador.

Suporte a navegadores

Figuras na tabela indicam regras @media suporte primeiro número da versão do browser.

regra
@media	21	9	3,5	4.0	9

CSS Syntax

@media mediatype e | não | somente (recurso de mídia) {
CSS-Code;
}

Você também pode usar diferentes folhas de estilo para diferentes mídias:

Tipo de mídia

valor	descrição
tudo	Para todos os dispositivos
auricular	Obsoleta. Para o discurso e sintetizador de voz
braille	Obsoleta. equipamentos Braille usado em contato-feedback
em relevo	Obsoleta. aparelho de impressão para a impressão cego
handheld	Obsoleta. Para dispositivos portáteis ou dispositivos menores, como PDA e telefone pequeno
impressão	Para impressoras e visualização de impressão
projeção	Obsoleta. Para equipamento de projeção
tela	Para ecrãs de computador, tablet PCs, smartphones e similares.
discurso	Aplicado aos leitores de tela e outros equipamentos de som
tty	Obsoleta. Para a fixação da grelha de caracteres, como o telégrafo, equipamento terminal e caráter limitado do dispositivo portátil
TV	Obsoleta. Para TV e Web TV

recursos de mídia

valor	descrição
aspecto-ratio	Definir o dispositivo de saída na região do visível da largura da página e à altura
cor	Definir o dispositivo de saída em cada grupo o número da cor original. Se não é um dispositivo de cor, o valor é igual a 0
cor-index	O número de entradas na tabela de cor look-up é definido no dispositivo de saída. Se você não usar uma tabela de busca de cores, o valor é igual a 0
dispositivo de aspecto-ratio	dispositivo de saída de definição de tela largura visível a relação de altura.
dispositivo de altura	dispositivo de saída de definição de tela altura visível.
dispositivo de largura	dispositivo de saída de definição de tela largura visível.
grade	dispositivo de saída usado para consultar se a grade ou rede.
altura	Definir o dispositivo de saída na região visível da altura da página.
max-aspect-ratio	dispositivo de saída de definição de tela razão máxima visível entre largura e altura.
max-color	Definir o número máximo de dispositivos de saída de cada conjunto de cor original.
max-cor-index	O número máximo de entradas na tabela de cor look-up é definido no dispositivo de saída.
max-device-aspect-ratio	dispositivo de saída de definição de tela razão máxima visível entre largura e altura.
max-device-altura	Tela definir os dispositivos de saída visíveis a altura máxima.
max-device-width	dispositivo de saída de definição de tela largura máxima visível.
max-height	Definir o dispositivo de saída na região visível da altura máxima da página.
max-monocromático	É definido em um quadro monocromático buffer contém por pixel é o número máximo de monocromático original.
max-resolução	A resolução máxima define o dispositivo.
max-width	Definir o dispositivo de saída na região do visível entre a largura máxima da página.
min-aspect-ratio	Definir o dispositivo de saída na área da página de índice mínimo visível entre largura e altura.
min-color	Definir o dispositivo de saída de cada número mínimo fixado do original colorido.
min-cor-index	O número mínimo de entradas na tabela de cor look-up é definido no dispositivo de saída.
min-device-aspect-ratio	Tela definir o rácio mínimo de dispositivos de saída visível entre largura e altura.
min-device-width	dispositivos de saída de tela definido largura mínima visível.
min-device-altura	Mínimo definir ecrã altura visível do dispositivo de saída.
min-height	Definir o dispositivo de saída na região visível da altura mínima da página.
min-monocromático	O número mínimo de cores originais é definido em um frame buffer monocromático contém por pixel
min-resolução	A resolução mínima define o dispositivo.
min-width	Definir o dispositivo de saída na região do visível entre a largura mínima da página.
monocromático	É definido em um frame buffer monocromático contém por pixel monocromático número original. Se não é um dispositivo monocromático, o valor é igual a 0
orientação	Definir o dispositivo de saída na região visível da altura da página é maior do que ou igual à largura.
resolução	Definir a resolução do dispositivo. Tais como: 96dpi, 300dpi, 118dpcm
digitalização	Processo de digitalização tipo Definition TV de equipamento.
largura	Definir o dispositivo de saída na região do visível da largura da página.