Consultas de mídia no CSS | Explicado
Este artigo apresentará um guia abrangente para as consultas de mídia CSS e será organizado da seguinte maneira:
- O que são consultas de mídia CSS?
- Sintaxe básica
- Por que as consultas de mídia são usadas
- Tipos de consultas de mídia
- Implementação prática de consultas de mídia CSS
Então vamos começar!
O que são consultas de mídia CSS?
A consulta de mídia nos permite criar vários layouts, dependendo do tamanho da viewport. Por exemplo, as consultas de mídia podem detectar se o usuário está usando um mouse ou uma tela sensível ao toque, etc.
A lista abaixo apresenta coisas diferentes que uma mídia CSS cheques:
- Altura e largura da Viewport.
- Altura e largura do dispositivo.
- Resolução.
- Orientação do dispositivo eu.e. retrato ou paisagem.
Em suma, podemos dizer que as consultas de mídia são muito úteis para detectar os vários aspectos relacionados ao ambiente em que o site está em execução.
Sintaxe básica
A sintaxe básica das consultas de mídia consiste em várias coisas, como o tipo de mídia (i.e. tela, tudo, etc.), uma única ou múltipla expressões. A consulta de mídia sempre será iniciada com o "@media". O "tipo de mídia”Pode ser combinado com expressões) Usando um operador lógico, no entanto, é opcional:
@media mediatype e (expressão/expressões)/ * Regras de código/CSS */
Uma consulta de mídia no CSS é uma operação lógica, portanto, sempre que se tornar verdadeiro, o CSS relacionado será aplicado ao elemento de destino.
Por que as consultas de mídia são usadas
As consultas de mídia são usadas para fornecer uma aparência personalizada a um site para vários dispositivos, como laptops, desktops, telefones celulares, etc. Portanto, podemos dizer que as consultas de mídia são usadas para criar novas regras CSS ou substituir o CSS existente para apresentar um site responsivo.
Tipos de consultas de mídia
Existem quatro tipos de consultas de mídia CSS que podem ser usadas para fins diferentes, conforme listado abaixo:
| Tipo de mídia | Descrição |
|---|---|
| todos | Usado para todos os tipos de mídia i.e. tela, impressão, fala |
| tela | Usado para telas como telefones celulares, laptops, etc. |
| imprimir | Usado apenas para impressoras. |
| discurso | Usado para leitura de tela |
Implementação prática de consultas de mídia CSS
A partir de agora, temos uma idéia básica do que é uma consulta de mídia, sua sintaxe, por que devemos usá -la e quais são os diferentes tipos de consultas de mídia CSS. E agora, para uma compreensão profunda, implementaremos esses conceitos teóricos em um cenário prático.
Exemplo
Neste exemplo, vamos criar três parágrafos e um título, e definiremos o alinhamento de cor e texto do corpo como cinza claro e Centro respectivamente. Além disso, utilizaremos as consultas de mídia para modificar a cor do fundo e o alinhamento de texto para céu azul e esquerda que entrará em ação quando o tamanho da tela for mais largo que ou igual a 360 pixels:
Consultas de mídia
A cor de fundo do corpo é cinza claro
A cor de fundo será alterada de cinza claro para azul -celeste se a viewport for mais larga que 360 pixels
O snippet abaixo dado mostrará o funcionamento das consultas de mídia CSS:
A partir da saída, fica claro que inicialmente, a cor do fundo era cinza claro e o texto estava alinhado no centro, porque naquele momento a largura da tela era menor que 360. No entanto, quando mudamos (maior que 360) a largura da tela, a cor do fundo e o alinhamento do texto foi modificada na cor azul do céu e o alinhamento esquerdo.
Conclusão
As consultas de mídia são usadas para personalizar a apresentação do site de acordo com o tamanho da tela do usuário. Usando consultas de mídia, podemos mostrar as várias marcas, dependendo do tipo de dispositivo (móvel, tablet, desktop). No CSS, as consultas de mídia são uma operação lógica e, portanto, sempre que isso se tornar verdadeiro, o CSS relacionado será aplicado ao elemento de destino. Este artigo apresenta um entendimento detalhado das consultas de mídia CSS e, para melhor entendimento, fornece trechos de código junto com os respectivos saídas.