Ao projetar um site responsivo, o desenvolvedor da Web deseja alterar a estrutura do layout da web com base no dispositivo usando -o. O CSS permite que seus usuários executem essa tarefa usando a regra @media que faz uso de consultas de mídia para alterar a aparência de um site correspondente ao tipo de dispositivo. Para entender qual é esta regra, leia a seguinte postagem. Os assuntos destacados no post são os seguintes.

1. @media regra
2. Sintaxe da regra @media
3. Tipos de mídia CSS
4. Tipos de recursos de mídia

@media regra

Com o objetivo de alterar a aparência de uma página da web com base no dispositivo, ou mídia que o exibe, a regra @media é usada. Esta regra utiliza as consultas de mídia para executar a tarefa acima mencionada. Esta regra prova ser de grande utilidade ao desenvolver um site responsivo.

Sintaxe da regra @media

Tem a seguinte sintaxe.

Palavras -chave explicadas

não: Ele reverte a semântica de uma consulta de mídia.

apenas: Impede as versões antigas de um navegador de implementar a consulta de mídia.

e: Ele combina um tipo de mídia com um determinado recurso de mídia.

TIPAS Mídia CSS

Há um total de quatro tipos de mídia que fornecemos abaixo.

todos

É aplicável a todos os tipos de dispositivos de mídia.

imprimir

Esta consulta é usada especificamente para impressoras.

tela

É usado para telas de vários tipos de dispositivos, como computadores, laptops, telefones celulares, etc.

discurso

Esta consulta é particularmente usada para leitores de tela.

Tipos de recursos de mídia

Descrevemos alguns dos recursos da mídia aqui.

1. qualquer zona

Esse recurso foi incluído nas consultas de mídia Nível 4 e especifica que, se um mecanismo de entrada fornecido, permite que o usuário pairasse sobre os elementos.

qualquer ponto

Isso também foi incluído nas consultas de mídia Nível 4 e afirma que, se um mecanismo de entrada fornecido é um dispositivo apontador e, se assim for, quão preciso é?

proporção da tela

Esse recurso define a proporção da largura da viewport e sua altura.

cor

Este recurso especifica os componentes das cores dos dispositivos de saída.

Gama de cores

Isso define a gama de cores que serão suportadas por dispositivos de saída.

índice de cores

Afirma o número de cores que um determinado dispositivo pode exibir.

grade

O tamanho das colunas e linhas é especificado pelo recurso de grade.

altura

Isso define a altura da visualização.

flutuar

Para permitir que os usuários pairem sobre os elementos HTML, o recurso de pairar é usado.

Colorias invertidas

Isso especifica se o dispositivo de saída inverte as cores.

no nível da luz

Como o nome sugere, ele define o nível de luz.

MAX-ASPECT-RATIO

A proporção máxima de largura e altura é especificada por esse recurso.

Max-cor

O maior número de bits por unidades de cores dos dispositivos de saída é declarado por esse recurso.

Max-Color-Index

Este recurso indica as cores máximas que um dispositivo pode exibir.

altura máxima

Este recurso define a altura máxima do navegador.

Max-monocromo

O maior número de bits por unidades de cores de uma ferramenta monocromática é declarada por esse recurso.

resolução min

A resolução mínima do dispositivo de saída é especificada pelo recurso de resolução min.

largura min

Este recurso define a largura mínima do navegador.

monocromático

Este recurso indica o número máximo de bits por componente colorido de um dispositivo monocromático.

orientação

Ele define se a orientação da viewport é retrato ou paisagem.

Bloco de transbordamento

Ele lida com os cenários em que o conteúdo da página da web transborda da viewport.

Overflow-in-line

Ele lida com os cenários em que o conteúdo da página da web transborda a viewport através do eixo embrulhado.

ponteiro

Um mecanismo de entrada fundamental para apontar dispositivos.

resolução

Afirma a resolução do dispositivo (em DPI ou DPCM)

Varredura

Ele digitaliza os dispositivos de saída.

script

Ele verifica se algum script como javascript está disponível ou não.

atualizar

Ele atualiza os dispositivos de saída rapidamente.

largura

A largura da viewport é definida por esse recurso.

Abaixo, apresentamos a você um exemplo para que você possa entender a regra @media de uma maneira melhor.

Exemplo

O exemplo abaixo demonstra a regra @media.

Html

CSS @Media Regra

Com o objetivo de alterar a aparência de uma página da web com base no dispositivo, ou mídia que o exibe, a regra @media é usada. Esta regra utiliza as consultas de mídia para executar a tarefa acima mencionada. Esta regra prova ser de grande utilidade ao desenvolver um site responsivo.

Aqui definimos dois elementos que são

e

. Aplicaremos algumas regras de mídia sobre esses elementos.

CSS

H1, P
Fonte-família: 'Times New Roman', Times, Serif;
Size da fonte: 16px;
estilo de fonte: normal;

@media Screen e (Min-Width: 720px)
P
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;
Size da fonte: 25px;
estilo de fonte: itálico;

No código acima, especificamos que o título e o parágrafo terão a família de fontes Verdana, um tamanho de fonte de 25px e um estilo de fonte em itálico se a largura mínima da tela do dispositivo for 720px ou mais ampla. No entanto, se a largura da tela for menor que 720px, a família de fontes será Times New Roman, tamanho da fonte 16px e estilo de fonte Normal.

Saída

Quando a largura da tela é 720px ou maior.

Quando a largura da tela é menor que 720px.

A regra @media foi implementada com sucesso.

Conclusão

A regra @media é usada para alterar a aparência de uma página da web com base no dispositivo, ou mídia que a exibe. A sintaxe da regra afirma que o tipo de mídia deve ser definido junto com certos recursos de mídia e usar alguns operadores. Além disso, existem quatro tipos que são; todos, tela, impressão e fala. Além disso, existem muitos recursos de mídia, como largura, monocromático, altura, bloqueio de transbordamento, etc. Este post explica profundamente a regra @media, juntamente com sua sintaxe, tipos de mídia e recursos de mídia.