CSS3 consultas de mídia

tipos de mídia CSS2

@media regra é descrito na CSS2, e podem ser personalizados para diferentes tipos de mídia diferentes regras de estilo.

Por exemplo: você pode definir regras diferentes de estilo para diferentes tipos de mídia (incluindo monitores, dispositivos portáteis, televisores, etc.).

Mas estes tipos de suporte multimídia em muitos dispositivos ainda amigável o suficiente.

CSS3 consultas de mídia

consulta CSS3 multimedia herda todos os tipos de mídia CSS2 pensamento: Em vez de encontrar o tipo de equipamento, as configurações de exibição CSS3 acordo com a adaptação.

consultas meios podem ser usados ​​para detectar muitas coisas, tais como:

• A janela de visualização (janelas) de largura e altura
• Largura e altura do aparelho
• Toward (tela horizontal Smartphone, tela vertical).
• resolução

Actualmente, muitos para o telefone da Apple, telefone Android, tablet e outros dispositivos serão usados ​​para exibir a consulta.

Suporte a navegadores

Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.

sintaxe de consulta Multimedia

Multimedia inquérito composta por uma variedade de meios, pode conter uma ou mais expressões, expressão é estabelecida de acordo com as condições retorna verdadeiro ou falso.

@media not|only mediatype and (expressions) {
    CSS-Code;
}

Se o tipo de correspondência de tipo de dispositivo de mídia especificado, a consulta retorna verdade, o documento irá mostrar o efeito do estilo especificado no dispositivo correspondente.

A menos que você usar não só o operador ou de outra forma, todos os estilos vão se adaptar a exibição em todos os dispositivos.

• Não: não ser usado para excluir determinados dispositivos, como @media não imprimir (equipamentos não-impressão).

• apenas: para definir alguns tipos de mídia especiais.Suporte para consultas de mídia dispositivos móveis, se houver apenas uma palavra-chave, o navegador da Web para dispositivos móveis irá ignorar a única palavra-chave e de expressão após a aplicação directamente a partir do arquivo de estilo. Para consultas de mídia quando o dispositivo não suporta a capacidade de ler, mas Media Type tipo de navegador Web, palavra-chave encontradas só ignora este arquivo de estilo.

• tudo: todos os dispositivos, este deve sempre ver.

Você também pode usar um diferentes arquivos de estilo em mídia diferente:

tipos de mídia CSS3

Exemplos simples de inquérito multimédia

Usando consultas multimédia pode ser utilizado para substituir o modelo original correspondente para o modelo no dispositivo especificado.

Os exemplos a seguir alterar as cores de fundo na tela tamanho da janela visível equipamento maior que 480 pixels:

Os exemplos a seguir são visíveis no tamanho da janela de tela maior do que 480 pixels irá flutuar para a página de menu à esquerda:

referência @media CSS3

Descubra mais conteúdo multimídia pode se referir @media regras.