Fundamentos de Media Queries

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 65 de 76.

Uma media query em CSS permite que um site se adapte a diferentes tamanhos de tela, aplicando estilos com base na largura, altura ou outras propriedades do dispositivo.

Sintaxe Básica para Media Queries:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condição: A regra que aciona os estilos (ex: max-width: 600px).
seletor: O(s) elemento(s) HTML a ser(em) estilizado(s).

propriedade: A propriedade CSS a ser definida (ex: width, font-size).
valor: O valor atribuído à propriedade, que muda com base na condição da media query.

Em uma media query, a condição pode ser baseada em vários fatores como tamanho da tela, resolução e muito mais. Algumas condições comuns incluem:

max-width: Limita os estilos a telas com uma largura máxima (ex: max-width: 600px).
min-width: Aplica estilos a telas com uma largura mínima (ex: min-width: 768px).

max-height: Limita os estilos a telas com uma altura máxima (ex: max-height: 400px).
min-height: Aplica estilos a telas com uma altura mínima (ex: min-height: 500px).

Essas condições ajudam você a controlar como seu site aparece em diferentes dispositivos e orientações.

Exemplo:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Isso altera a cor de fundo para lightblue quando a largura da tela for 600px ou menor. Para telas entre 601px e 1024px, a cor de fundo será lightgreen.

Desafio

Fácil

Você recebeu um documento HTML com um título (<h1>), um parágrafo (<p>) e uma <div>. Sua tarefa é adicionar media queries para tornar a página responsiva. Siga os passos abaixo:

Adicione uma query @media para telas com uma largura máxima de 600px:
- Defina a cor de fundo do corpo (body) como azul claro (light blue).
- Defina o tamanho da fonte do título (<h1>) para 5vw (5% da largura da viewport).
Adicione uma query @media para telas com uma largura mínima de 601px e largura máxima de 1024px:
- Defina a cor de fundo do corpo (body) como verde claro (light green).
- Defina o tamanho da fonte do título (<h1>) para 3vw (3% da largura da viewport).

Redimensione a janela do navegador para ver como as media queries ajustam o layout dinamicamente.

Folha de consulta

Uma media query em CSS permite que um site se adapte a diferentes tamanhos de tela, aplicando estilos baseados na largura, altura ou outras propriedades do dispositivo.

Sintaxe básica:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

Condições comuns:

max-width: Limita os estilos a telas com largura máxima
min-width: Aplica estilos a telas com largura mínima
max-height: Limita os estilos a telas com altura máxima
min-height: Aplica estilos a telas com altura mínima

Exemplo:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}
}

Experimente você mesmo

<html>
<head>
    <title>Media Queries Basics</title>
    <!--Escreva seu código aqui-->
    <style>
        
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>