CSS2 Introduzido tipos de mídia
O @media regra, introduzida em CSS2, tornou possível definir diferentes regras de estilo para diferentes tipos de mídia.
Exemplos: Você poderia ter um conjunto de regras de estilo para telas de computador, uma para impressoras, uma para dispositivos portáteis, uma para dispositivos do tipo de televisão, e assim por diante.
Infelizmente, esses tipos de mídia nunca recebi muito apoio por meio de dispositivos, além do tipo de mídia de impressão.
CSS3 lança consultas de mídia
consultas de mídia em CSS3 alargar os tipos de mídia ideia CSS2: Em vez de olhar para um tipo de dispositivo, eles olham para a capacidade do dispositivo.
consultas de mídia pode ser usado para verificar muitas coisas, tais como:
- largura e altura da janela de visualização
- largura e altura do dispositivo
- orientação (é o tablet / telefone no modo paisagem ou retrato?)
- resolução
Usando consultas de mídia são uma técnica popular para a entrega de uma folha de estilo personalizada para tablets, iPhone e Androids.
Suporte a navegadores
Os números na tabela especifica a primeira versão do navegador que suporta plenamente a regra @media.
| Propriedade | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Mídia Sintaxe de Consulta
Uma consulta de mídia consiste em um tipo de mídia e pode conter um ou mais expressões, que resolve a verdadeira ou falsa.
@media not|onlymediatype and (expressions) {
CSS-Code;
}O resultado da consulta é verdadeiro se o tipo de mídia especificado corresponde ao tipo de dispositivo o documento está sendo exibido no e todas as expressões na consulta de mídia são verdadeiras. Quando uma consulta de mídia é verdade, as regras de folhas de estilo ou estilo correspondentes são aplicados, seguindo as regras em cascata normais.
A menos que você usar os operadores não ou apenas, o tipo de mídia é opcional e a all tipo será implícita.
Você também pode ter diferentes folhas de estilo para diferentes mídias:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">Tipos de mídia CSS3
| Valor | Descrição |
|---|---|
| all | Usado para todos os dispositivos de tipo de mídia |
| Usado para impressoras | |
| screen | Usado para telas de computadores, tablets, smartphones, etc. |
| speech | Usado para leitores de tela que "lê" a página em voz alta |
Consultas de mídia exemplos simples
Uma maneira de usar consultas de mídia é ter uma seção CSS alternativo dentro do seu direito de folha de estilo.
O exemplo a seguir altera a background-color para Lightgreen se o visor é de 480 pixels de largura ou mais larga (se a janela for menor que 480 pixels, o background-color será rosa):
Exemplo
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Tente você mesmo " O exemplo a seguir mostra um menu que irá flutuar à esquerda da página, se a janela de visualização é de 480 pixels de largura ou mais larga (se a janela for menor que 480 pixels, o menu estará no topo do conteúdo):
Exemplo
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Tente você mesmo " CSS3 @media Referência
Para uma lista completa de tipos de todos os meios e recursos / expressões, por favor, olhar para o @media regra na nossa referência CSS.