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 em outras propriedades do dispositivo.

Sintaxe básica para Media Queries:

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

condition: A regra que aciona os estilos (por exemplo, max-width: 600px).
selector: O(s) elemento(s) HTML a serem estilizados.

property: A propriedade CSS a ser definida (por exemplo, width, font-size).
value: O valor atribuído à propriedade, que muda com base na condição da consulta de mídia.

Em uma consulta de mídia, a condition 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 (por exemplo, max-width: 600px).
min-width: Aplica estilos a telas com uma largura mínima (por exemplo, min-width: 768px).

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

These condições ajudam você a controlar a aparência do seu site 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 background para lightblue quando a largura da tela é de 600px ou menor. Para telas entre 601px e 1024px, a cor de background será lightgreen.

Desafio

Fácil

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

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

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

Experimente você mesmo

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Escreva seu código aqui-->
        
    </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>