Exemplo
Alterar a cor de fundo se o visor é de 480 pixels de largura ou mais ampla:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A regra @media é usado para definir regras diferentes de estilo para diferentes mídias tipos / dispositivos.
Em CSS2 este foi chamado tipos de mídia, enquanto em CSS3 é chamado de consultas de mídia.
consultas Meios olhar para a capacidade do dispositivo, e pode ser usado para verificar muitas coisas, tais como:
- largura e altura da janela de visualização
- largura e altura do dispositivo
- orientação (is the tablet/phone in landscape or portrait mode?)
- resolução
- e muito mais
Suporte a navegadores
Os números na tabela especifica a primeira versão do navegador que suporta plenamente a regra @media.
| Propriedade | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3,5 | 4.0 | 9 |
CSS Syntax
@media not|onlymediatype and (media feature){
CSS-Code;
}Você também pode ter diferentes folhas de estilo para diferentes mídias:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Tipos de mídia
| Valor | Descrição |
|---|---|
| all | Usado para todos os dispositivos de tipo de mídia |
| aural | Descontinuada. Usado para a fala e sintetizadores de som |
| braille | Descontinuada. Usado para dispositivos táteis de retorno braille |
| embossed | Descontinuada. Usado para impressoras braille paginadas |
| handheld | Descontinuada. Usado para dispositivos pequenos ou portáteis |
| Usado para impressoras | |
| projection | Descontinuada. Usado para apresentações projetadas, como slides |
| screen | Usado para telas de computadores, tablets, smartphones, etc. |
| speech | Usado para leitores de tela que "reads" a página em voz alta |
| tty | Descontinuada. Usado para mídia usando uma grade de caracteres de passo fixo, como teletypes e terminais |
| tv | Descontinuada. Usado para dispositivos tipo televisão |
Recursos de mídia
| Valor | Descrição |
|---|---|
| aspect-ratio | A proporção entre a largura ea altura da janela de visualização |
| color | O número de bits por componente de cor para o dispositivo de saída |
| color-index | O número de cores, o dispositivo pode exibir |
| device-aspect-ratio | A relação entre a largura e a altura do dispositivo |
| device-height | A altura do dispositivo, tal como um ecrã de computador |
| device-width | A largura do dispositivo, tal como um ecrã de computador |
| grid | Se o dispositivo é uma grade ou bitmap |
| height | A altura viewport |
| max-aspect-ratio | A relação máxima entre a largura ea altura da área de exibição |
| max-color | O número máximo de bits por componente de cor para o dispositivo de saída |
| max-color-index | O número máximo de cores, o dispositivo pode exibir |
| max-device-aspect-ratio | A relação máxima entre a largura e a altura do dispositivo |
| max-device-height | A altura máxima do dispositivo, tal como um ecrã de computador |
| max-device-width | A largura máxima do dispositivo, tal como um ecrã de computador |
| max-height | A altura máxima da área de exibição, tal como uma janela de navegador |
| max-monochrome | O número máximo de bits por "color" em um monocromático (greyscale) dispositivo |
| max-resolution | A resolução máxima do dispositivo, usando dpi ou dpcm |
| max-width | A largura máxima da área de exibição, como uma janela do navegador |
| min-aspect-ratio | A razão mínima entre a largura e a altura da área de exibição |
| min-color | O número mínimo de bits por componente de cor para o dispositivo de saída |
| min-color-index | O menor número de cores, o dispositivo pode exibir |
| min-device-aspect-ratio | A razão mínima entre a largura e a altura do dispositivo |
| min-device-width | A largura mínima do dispositivo, tal como um ecrã de computador |
| min-device-height | A altura mínima do dispositivo, tal como um ecrã de computador |
| min-height | A altura mínima da área de exibição, como uma janela do navegador |
| min-monochrome | O número mínimo de bits por "color" em um monocromático (greyscale) dispositivo |
| min-resolution | A resolução mínima do dispositivo, usando dpi ou DPCM |
| min-width | A largura mínima da área de exibição, como uma janela do navegador |
| monochrome | O número de bits por "color" em um monocromático (greyscale) dispositivo |
| orientation | A orientação da janela de exibição (landscape or portrait mode) |
| overflow-block | Como é que o conteúdo identificador do dispositivo de saída que transborda a janela de exibição ao longo do eixo do bloco (added in Media Queries Level 4) |
| overflow-inline | Pode conteúdo que transborda a janela de exibição ao longo do eixo em linha ser rolada (added in Media Queries Level 4) |
| resolution | A resolução do dispositivo de saída, usando dpi ou DPCM |
| scan | O processo de verificação de saída do dispositivo |
| update-frequency | Como pode rapidamente o dispositivo de saída de modificar a aparência do conteúdo (added in Media Queries Level 4) |
| width | A largura viewport |
mais Exemplos
Exemplo
Use a regra @media para fazer design responsivo:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Tente você mesmo " Páginas relacionadas
Tutorial CSS: CSS consultas de mídia