9 truques avançados de CSS de consulta de mídia que você deve conhecer

Uma experiência utilizável e acessível é vital para um site de sucesso. Se seus leitores tiverem uma experiência positiva, é mais provável que realizem um call to action, incluindo a compra de produtos. Eles também são mais propensos a retornar ou recomendar seu site a outras pessoas. A experiência é fundamental.

As consultas de mídia oferecem diferentes recursos CSS que podem personalizar seu site. Eles permitem que você personalize a experiência de cada usuário com base nos recursos de seu dispositivo. Saiba como oferecer a melhor experiência aos seus leitores, estejam eles usando o telefone ou um grande monitor de desktop.

1. O recurso de ponteiro

O regra @media possui um recurso de ponteiro que permite personalizar seu design com base no dispositivo apontador principal. Você pode testar a disponibilidade e a qualidade.

Este ponteiro recurso de consulta de mídia assume um dos três valores: nenhum, grosso ou fino. O Nenhum valor se aplica quando não há dispositivo apontador. O grosseiro valor se aplica quando o dispositivo apontador primário tem um nível de precisão reduzido. E a

multar valor se aplica quando o dispositivo apontador primário tem um alto nível de precisão.

Usando o recurso de ponteiro

Opções para escolher: 
 opção um
 Opção Dois

O código acima gera duas opções de rádio de entrada, que variam de acordo com a precisão do dispositivo apontador primário de um computador.

Um computador que tenha um dispositivo apontador primário preciso (ou de alta qualidade) exibirá a seguinte página da web:

Um computador que tenha um dispositivo principal com precisão limitada (ou baixa qualidade) exibirá a seguinte página da web:

O dispositivo que possui um dispositivo apontador primário com um nível limitado de precisão possui botões de opção maiores. Isso proporciona uma melhor experiência de usuário para esses usuários. Com o recurso de ponteiro, você pode garantir que todos os seus usuários tenham uma experiência agradável, independentemente do dispositivo.

2. O recurso de qualquer ponteiro

Assim como o recurso de ponteiro, o recurso de consulta de mídia de qualquer ponteiro tem como alvo dispositivos apontadores. No entanto, o recurso de qualquer ponteiro avalia todos os dispositivos apontadores de um computador. O recurso de qualquer ponteiro também usa o Nenhum, grosseiro, e multar valores.

Usando o recurso de qualquer ponteiro

 @media (qualquer ponteiro: bom) {
 input[type="radio"] {
 largura: 15px;
 altura: 15px;
 raio da borda: 20px;
 largura da borda: 1px;
 }
 }
@media (qualquer ponteiro: grosseiro) {
 input[type="radio"] {
 largura: 25px;
 altura: 25px;
 raio da borda: 20px;
 largura da borda: 2px;
 }
 }

Você pode simplesmente substituir o código acima pela seção de consulta de mídia do código no exemplo do recurso de ponteiro. O código acima renderiza uma exibição apropriada com base na qualidade de qualquer dispositivo apontador que um computador possa ter.

3. O recurso de foco

O recurso de consulta de mídia flutuante avalia se o mecanismo de entrada principal de um dispositivo é capaz de passar o mouse sobre os elementos em uma interface do usuário.

Usando o recurso de foco

 /*CSS*/
 uma{
 decoração de texto: nenhuma;
 cor preta;
 }
 @media (hover: hover) {
 a: pairar {
 cor azul;
 }
 }
 HTML 
 Um elemento de ligação

O código acima exibirá um elemento. Ele mudará de cor (de preto para azul) sempre que o mecanismo de entrada principal de um dispositivo (que suporta pairar) passar sobre ele.

4. O recurso de qualquer pairar

O qualquer pairar A consulta de mídia tem como alvo qualquer mecanismo de entrada, incluindo o mecanismo de entrada principal.

Usando o recurso any-hover

@media (qualquer-hover: hover) {
 a: pairar {
 cor azul;
 }
 }

A consulta de mídia acima produz um efeito de foco para qualquer mecanismo de entrada capaz de passar o mouse sobre um elemento.

5. O recurso de resolução

O recurso de consulta de mídia de resolução calcula o número de pixels exibidos por um dispositivo específico. Um dispositivo que exibe mais pixels por polegada tem uma resolução melhor porque exibe imagens com mais detalhes. Esse recurso pode ajudar um desenvolvedor a decidir quais usuários de dispositivos podem ver elementos em uma interface do usuário com mais clareza.

O recurso de resolução usa o intervalo. Isso significa que, além de usar o resolução palavra-chave, você pode usar resolução mínima e resolução máxima. O recurso de resolução de consulta de mídia pertence ao tipo de dados de resolução. Isso significa que o recurso de resolução é mensurável em uma das três unidades: pontos por polegada (dpi), pontos por centímetro (dpcm) ou pontos por pixels (dppx).

Usando o recurso de resolução

/*CSS*/
@media (resolução mínima: 72 dpi) {
 p{
 cor branca;
 cor de fundo: azul;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

A resolução mais baixa que um dispositivo pode ter e ainda exibir imagens de qualidade é 72 dpi. Portanto, se um dispositivo tiver uma resolução de 72 dpi ou mais, ele exibirá a seguinte saída em seu navegador:

6. O recurso de orientação

Uma viewport de dispositivo pode ter apenas uma das duas orientações: retrato ou paisagem. Você deve observar que uma orientação de viewport é diferente de uma orientação de dispositivo. Se um dispositivo usa um teclado virtual, sua janela de visualização pode mudar de retrato para paisagem enquanto o próprio dispositivo ainda estiver na posição retrato.

Usando o recurso de orientação

/*CSS*/
 corpo{
 exibição: flexível;
 }
 seção{
 borda: azul sólido de 2px;
 preenchimento: 3px;
 margem: 3px;
 }
 @media (orientação: paisagem) {
 corpo {
 direção flexível: linha;
 }
 }
@media (orientação: retrato) {
 corpo {
 direção flexível: coluna;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

O código acima altera o layout de uma página da web com base na orientação de um dispositivo.

Um dispositivo com uma janela de visualização no modo paisagem exibirá a seguinte página da Web:

Um dispositivo com uma janela de visualização no modo retrato exibirá a seguinte página da Web:

7. O recurso de altura

O recurso de consulta de mídia de altura permite especificar o estilo CSS com base na altura da janela de visualização do dispositivo de um usuário. Este recurso suporta alcance, então você também pode usar o min-altura e altura máxima palavras-chave.

Usando o recurso de altura

 /*CSS*/
 @media (altura mínima: 360px) {
 p{
 borda: laranja pontilhado de 2px;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

O código acima personaliza o que um usuário vê com base na altura do dispositivo. Os usuários com altura de dispositivo de 360px ou superior verão algo semelhante à seguinte página da web:

Dispositivos com altura abaixo de 360px não exibirão a borda ao redor do parágrafo na página da web.

8. O recurso de largura

O recurso de consulta de mídia de largura permite que você crie um estilo CSS específico com base na largura da janela de visualização do dispositivo de um usuário. Este recurso também suporta alcance, então você tem a opção de usar o largura mínima e largura máxima palavras-chave.

Usando o recurso de largura

 /*CSS*/
 @media (largura mínima: 600px) {
 p{
 borda: roxo sólido de 2px;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

O código acima personaliza o que um usuário vê com base na largura de seu dispositivo. Os usuários com largura de dispositivo de 600px ou mais verão algo como a seguinte página da web:

O uso de consultas de mídia com base em largura e altura pode ser uma estratégia eficaz na tornando seu site responsivo.

9. O recurso de cor

O recurso de consulta de mídia colorida avalia o componente de cor de um dispositivo (vermelho, verde, azul). O valor se refere a quantos bits um display usa para cada componente, o que define quantas cores diferentes ele pode mostrar. Dispositivos modernos normalmente usam uma tela de 24 bits que usa oito bits por componente de cor. Também recebe um valor inteiro, onde um dispositivo incolor é zero.

O recurso de cor também usa o min-color e cor máxima gamas.

Usando o recurso de cor

 /*CSS*/
 @media (cor mínima: 7) {
 p{
 borda: 2px verde sólido;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Dispositivos com um componente de cor de sete ou mais exibirão a seguinte saída em seus navegadores:

Agora você pode criar experiências de usuário únicas

Você deve poder usar essas consultas de mídia avançadas para aprimorar a experiência de cada usuário que visita seu site ou aplicativo. É importante oferecer aos usuários de dispositivos móveis e de computadores uma experiência igualmente positiva em seu site.

As consultas de mídia não são as únicas ferramentas CSS que podem fortalecer suas habilidades de desenvolvedor.

8 dicas e truques essenciais de CSS que todo desenvolvedor deve saber

Leia a seguir

Sobre o autor