Fundamentos das Media Queries

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 65 de 76.

Uma consulta de mídia 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 consultas de mídia:

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

condição: A regra que aciona os estilos (por exemplo, max-width: 600px).
seletor: O(s) elemento(s) HTML a estilizar.

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

Em uma consulta de mídia, a condição pode se basear em vários fatores, como tamanho da tela, resolução e outros. 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 altura máxima (por exemplo, max-height: 400px).
min-height: Aplica estilos a telas com altura mínima (por exemplo, min-height: 500px).

Essas 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 fundo para azul-claro quando a largura da tela é de 600px ou menos. Para telas entre 601px e 1024px, a cor de fundo será verde-claro.

Desafio

Fácil

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

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

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

Experimente você mesmo

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    /* Write your code here */
        
    </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>