2.1 Fundamentos dos Media Queries
Media Queries são uma das ferramentas chave para construir sites responsivos. Com eles, dá pra adaptar estilos para diferentes dispositivos e tamanhos de tela, garantindo uma visualização legal e usabilidade. A seguir, vamos dar uma olhada nos fundamentos dos media queries, sua sintaxe e exemplos de como adaptar estilos para diferentes telas.
Media Queries usam a regra @media, que permite aplicar certos estilos apenas quando condições específicas são atendidas. As condições podem incluir tamanhos de tela, resolução, orientação e outros parâmetros.
Sintaxe:
@media media-type and (media-feature) {
/* estilos */
}
Onde:
media-type: tipo de mídia para o qual os estilos serão aplicados. Normalmente é usado screenmedia-feature: características da mídia, como largura, altura, orientação etc.
Exemplo:
- Neste exemplo, o fundo da página vai ficar azul claro se a largura da tela for no máximo 768 pixels.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Tipos de Media Queries
1. Consultas de largura e altura
Esses media queries permitem mudar estilos baseado na largura e altura da janela de visualização.
Exemplos:
/* Aplica estilos se a largura da tela for menor ou igual a 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Aplica estilos se a altura da tela for maior que 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientação (orientation)
Consultas de orientação de tela permitem adaptar estilos dependendo se o dispositivo está no modo retrato (portrait) ou paisagem (landscape).
Exemplos:
/* Aplica estilos para orientação retrato */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Aplica estilos para orientação paisagem */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Densidade de Pixels (resolution)
Media queries por densidade de pixels permitem adaptar estilos para dispositivos com diferentes densidades de pixels, como telas Retina.
Exemplos:
/* Aplica estilos para telas com densidade de pixels 2x e superior */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Aplica estilos para telas com densidade de pixels menor que 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Combinando Media Queries
Media queries podem ser combinados usando operadores lógicos and, not e only.
Exemplos
Usando o operador and:
/* Aplica estilos para dispositivos com largura de tela entre 600px e 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Usando o operador not:
/* Aplica estilos para todos os dispositivos, exceto aqueles com largura de tela menor que 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Usando o operador only:
/* Aplica estilos apenas para telas */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION