Media Queries
Media queries é uma técnica de consulta de mídia que atribui diferentes estilos CSS para diferentes resoluções de tela possibilitando assim fornecer um visual diferente a cada resolução detectada.
As Media queries definem condições para utilização de estilos CSS. Se o dispositivo de acesso do usuário se adequar as condições se aplicam os estilos.
Os conceitos de breakpoints podem enfim serem aplicados agora com as Media queries pois seus valores são utilizados na sintaxe para definir a partir de qual ponto se aplicará os estilos CSS.
Na utilização das Medias queries podem ser empregados diversas características de mídia (Media Features):
- aspect-ratio;
- color;
- color-index;
- device-aspect-ratio;
- device-height;
- device-width;
- grid;
- height;
- monochrome;
- orientation;
- resolution;
- scan;
- width.
A instrução básica consiste na aplicação de uma condição e entre chaves a declaração CSS a ser aplicada para esta condição. Veja exemplo de aplicação da sintaxe:
CSS:/* Estilos aplicados a larguras até 480 pixels */
body {
background-color: #fc344c;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1.5em;
color: #fff;
}
/* Estilos aplicados a larguras acima 480 pixels */
@media screen and (min-width: 481px) {
body {
background-color: #05a4e7;
font-size: 2em;
}
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testando Media Queries</title>
<link rel="stylesheet" href="testando-media-queries.css">
</head>
<body>
Se você estiver vendo esta página em um dispositivo com resokução superior a 480 pixels a cor de fundo dela é azul. Entretanto se você estiver vendo em um dispositivo com resolução igual ou menor que 480 pixels a cor de fundo é vermelha.
</body>
</html>Para ver o resultado dos códigos acima visite esta página.
Os estilos aplicados a larguras até 480 pixels em body é feita com uma declaração CSS comum.
Porém nos estilos aplicados a largura acima de 480 pixels se identifica a instrução de Media Queries devido o uso da regra @media, seguido do tipo mídia (Media Types) screen (todos tipos de telas), cuja Media Features é width (com prefixo "min") com valor é 480 pixels.
Essa consulta de mídia instrui que dispositivos de tela com o mínimo de largura de 480 pixels exibirão o site com cor de fundo amarela. Enquanto na declaração CSS aplicada a largura de até 480 pixels a cor é vermelha.
Para saber mais sobre Media Queries acesse este artigo.
Instruções de Media Queries para folhas de estilos
É possível também definir uma folha de estilos dedicada exclusiva para determinada característica de mídia. Imagine definir estilos específicos para navegação para uma resolução acima de 480 pixels. Veja:
<link rel="stylesheet" href="nav-480.css" media="screen and (min-width:480px)">11 / 14