Unidades de Medida e Introdução a Media Queries 📏📱

🚀 Introdução

Olá, futuros desenvolvedores web! 👋 Nesta aula prática, vamos mergulhar em dois conceitos fundamentais para criar layouts web modernos e, acima de tudo, responsivos: as Unidades de Medida em CSS e as Media Queries.

Em um mundo com uma infinidade de dispositivos (smartphones, tablets, laptops, TVs), é essencial que nossos sites se adaptem e ofereçam uma ótima experiência de usuário, independentemente do tamanho da tela. É aqui que as unidades de medida flexíveis e as media queries entram em jogo, permitindo que nossos designs "conversem" com o ambiente em que são exibidos.

Prepare-se para colocar a mão na massa e transformar seus layouts estáticos em interfaces dinâmicas e adaptáveis!

📐 Unidades de Medida em CSS

As unidades de medida definem o tamanho de elementos, textos, espaçamentos e outras propriedades em CSS. A escolha da unidade correta é crucial para a responsividade.

Por que a escolha da unidade importa? 🤔

Usar unidades fixas pode quebrar seu layout em telas menores ou maiores. Unidades relativas, por outro lado, permitem que seus elementos escalem de forma proporcional, garantindo que o design se mantenha coeso em diferentes contextos.

Tipos de Unidades ↔️📏

Podemos classificar as unidades em dois grandes grupos: Absolutas (fixas) e Relativas (flexíveis).

1. Unidades Absolutas (Fixed) 📏

Estas unidades têm um tamanho fixo e não mudam em relação a outros elementos ou ao tamanho da viewport.

px (pixels): A unidade mais comum. Representa um pixel na tela. É útil para elementos que precisam ter um tamanho exato e não devem escalar, mas deve ser usada com cautela para garantir a responsividade geral.
- Exemplo:
```
.box {
  width: 150px; /* Largura fixa de 150 pixels */
  height: 100px;
  border: 1px solid black;
}
 
p {
  font-size: 16px; /* Tamanho de fonte fixo */
}
```
pt (points): Usado principalmente em mídias impressas. 1pt é igual a 1/72 de uma polegada. Raramente usado para web.

2. Unidades Relativas (Flexible) ↔️

Estas unidades são dinâmicas e escalam em relação a outro valor (como o tamanho da fonte do elemento pai, o tamanho da viewport, etc.). São a chave para o design responsivo!

em: Relativo ao font-size do elemento pai. Se o elemento pai não tiver um font-size definido, ele herda do seu próprio pai, e assim por diante, até o elemento raiz (<html>).
- Exemplo:
```
<div style="font-size: 20px;"> 
  <p style="font-size: 1em;">Este parágrafo terá 20px.</p>
  <span style="padding: 0.5em;">Este span terá 10px de padding.</span>
</div>
```
- Vantagem: Ótimo para componentes onde o espaçamento e o texto devem escalar juntos.
- Desvantagem: Pode ser difícil de gerenciar, pois o valor final de em depende de múltiplos font-sizes na cadeia de herança.

rem (root em): Relativo ao font-size do elemento raiz (<html>). Esta é uma das unidades mais recomendadas para tipografia e espaçamento geral, pois oferece controle centralizado sobre a escala de todo o documento.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR" style="font-size: 16px;"> <!-- Root com font-size de 16px -->
<head>
  <style>
    h1 { font-size: 2rem; /* 2 * 16px = 32px */ }
    p { font-size: 1rem; /* 1 * 16px = 16px */ }
    .container { padding: 1.5rem; /* 1.5 * 16px = 24px */ }
  </style>
</head>
<body>
  <h1>Título</h1>
  <p>Conteúdo do parágrafo.</p>
  <div class="container">Um container com padding.</div>
</body>
</html>

Vantagem: Previsível e fácil de gerenciar, pois todos os rems se baseiam em um único valor.

% (Porcentagem): Relativo ao valor da propriedade correspondente do elemento pai. Se você define width: 50%, significa 50% da largura do pai. Se define font-size: 120%, significa 120% do font-size do pai.

Exemplo:

<div style="width: 400px; height: 200px; background-color: lightgray;">
  <div style="width: 50%; height: 50%; background-color: lightblue;">
    <!-- Este div terá 200px de largura e 100px de altura -->
  </div>
</div>

vw (Viewport Width): Relativo a 1% da largura da viewport (a janela do navegador). Se a viewport tem 1000px de largura, 1vw é igual a 10px.
- Exemplo:
```
h1 {
  font-size: 5vw; /* O tamanho do título será 5% da largura da viewport */
}
.banner {
  width: 100vw; /* O banner ocupará a largura total da viewport */
}
```
- Vantagem: Excelente para elementos que precisam escalar perfeitamente com a largura da tela, como títulos grandes ou imagens de fundo.
vh (Viewport Height): Relativo a 1% da altura da viewport. Se a viewport tem 800px de altura, 1vh é igual a 8px.
- Exemplo:
```
.full-screen-section {
  height: 100vh; /* Ocupa a altura total da viewport */
}
```
- Vantagem: Útil para seções que devem preencher a tela verticalmente.
fr (Fractional Unit): Usado exclusivamente em CSS Grid Layout. Representa uma fração do espaço disponível no grid container.
- Exemplo (CSS Grid):
```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Três colunas: a do meio é o dobro das laterais */
  gap: 10px;
}
```
- Vantagem: Permite criar layouts de grid fluidos e flexíveis, onde as colunas/linhas se ajustam automaticamente.

📱 Introdução a Media Queries

As Media Queries são uma funcionalidade do CSS3 que permite aplicar estilos diferentes a um documento com base nas características do dispositivo que está sendo usado para visualizá-lo. Elas são a espinha dorsal do design responsivo.

O que são e para que servem? 🎯

Imagine que você quer que seu site tenha um layout de três colunas em desktops, mas em smartphones, você quer que essas colunas se empilhem verticalmente. As Media Queries permitem que você diga ao navegador: "Se a largura da tela for maior que X pixels, aplique este estilo; caso contrário, aplique aquele outro."

Sintaxe Básica 📝

A sintaxe de uma Media Query começa com @media, seguido pelo tipo de mídia e uma ou mais "features" (características) entre parênteses.

/* Exemplo de Media Query */
@media screen and (min-width: 768px) {
  /* Estilos CSS aplicados SOMENTE quando a tela é "screen"
     E a largura MÍNIMA da viewport é de 768 pixels ou mais. */
  body {
    background-color: lightblue;
  }
  .container {
    max-width: 960px;
  }
}

@media: Palavra-chave que inicia a Media Query.
screen: Tipo de mídia. Indica que os estilos são para telas de computador, tablets, smartphones, etc. Outros tipos incluem print (para impressão) e all (para todos os tipos de mídia).
and: Operador lógico para combinar múltiplas condições.
(min-width: 768px): Uma media feature. Significa "quando a largura mínima da viewport for 768 pixels".

Media Features Comuns 🌟

width / height: Largura/altura exata da viewport.
min-width: Largura mínima da viewport. Estilos aplicados quando a viewport é igual ou maior que o valor especificado.
max-width: Largura máxima da viewport. Estilos aplicados quando a viewport é igual ou menor que o valor especificado.
orientation: Orientação da viewport (portrait ou landscape).
resolution: Resolução da tela (e.g., min-resolution: 300dpi).

Breakpoints 🚦

Breakpoints são os pontos de interrupção onde seu layout muda para se adaptar a diferentes tamanhos de tela. Não há um conjunto universal de breakpoints "correto", mas alguns são comumente usados:

Pequenos dispositivos (smartphones): até 576px ou 600px
Dispositivos médios (tablets): 577px a 768px ou 601px a 992px
Dispositivos grandes (desktops): 769px ou 993px em diante

É uma boa prática começar com um design para dispositivos móveis (max-width) e depois adicionar Media Queries para telas maiores (min-width). Isso é conhecido como Mobile First.

Combinando Media Queries 🤝

Você pode combinar múltiplas condições usando operadores lógicos:

and: Todas as condições devem ser verdadeiras.

@media screen and (min-width: 600px) and (max-width: 900px) {
  /* Estilos para telas entre 600px e 900px */
  .sidebar {
    display: none;
  }
}

, (vírgula - operador or): Se qualquer uma das condições for verdadeira.

@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  /* Estilos aplicados se a tela for muito larga OU se estiver em modo paisagem */
  .header {
    font-size: 2.5rem;
  }
}

not: Nega uma condição (raramente usado).

Exemplo Oficial (MDN Web Docs) 📚

Este exemplo mostra como a cor de fundo e o tamanho da fonte podem mudar com base na largura da viewport:

/* Estilos padrão para telas pequenas (Mobile First) */
body {
  background-color: lightcoral;
  font-size: 16px;
}
 
/* Estilos para telas médias (a partir de 600px) */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen;
    font-size: 18px;
  }
}
 
/* Estilos para telas grandes (a partir de 900px) */
@media screen and (min-width: 900px) {
  body {
    background-color: lightblue;
    font-size: 20px;
  }
}

(Fonte adaptada: MDN Web Docs - Using Media Queries)

🧑‍💻 Exercícios Práticos: Construindo um Layout Responsivo

Agora é a sua vez de aplicar o que aprendemos! Vamos criar um layout simples e torná-lo responsivo usando unidades de medida relativas e Media Queries.

🛠️ Setup Inicial

Crie dois arquivos: index.html e style.css na mesma pasta.

index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Responsivo - Prática</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Meu Site Responsivo</h1>
        <nav>
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
    </header>
 
    <main class="container">
        <section class="hero">
            <h2>Bem-vindo à Era Responsiva!</h2>
            <p>Este é um parágrafo de exemplo para demonstrar unidades de medida e media queries.</p>
            <button>Saiba Mais</button>
        </section>
 
        <section class="cards-section">
            <div class="card">
                <h3>Card 1</h3>
                <p>Conteúdo do card um.</p>
            </div>
            <div class="card">
                <h3>Card 2</h3>
                <p>Conteúdo do card dois.</p>
            </div>
            <div class="card">
                <h3>Card 3</h3>
                <p>Conteúdo do card três.</p>
            </div>
        </section>
    </main>
 
    <footer>
        <p>&copy; 2023 Fundamentos da Web</p>
    </footer>
</body>
</html>

style.css (Código Base):

/* style.css */
 
/* Estilos globais básicos */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}
 
header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
 
header h1 {
    margin: 0;
}
 
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}
 
nav a {
    color: #fff;
    text-decoration: none;
}
 
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}
 
.hero {
    background-color: #007bff;
    color: #fff;
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
}
 
.hero h2 {
    font-size: 2.5em; /* Será alterado para rem/vw */
    margin-bottom: 15px;
}
 
.hero p {
    font-size: 1.1em; /* Será alterado para rem */
    margin-bottom: 25px;
}
 
button {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em; /* Será alterado para rem */
    border-radius: 5px;
}
 
.cards-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
 
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex: 1; /* Para que os cards se distribuam */
    min-width: 280px; /* Será alterado para % ou vw */
    text-align: center;
}
 
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

🎯 Tarefas

Siga os passos abaixo, alterando o arquivo style.css.

1. Configurar `rem` para o `font-size` base 📝

[ ] No elemento <html>, defina um font-size de 16px. Isso será a base para todos os seus rems.
[ ] Altere o font-size de header h1 para 2.5rem.
[ ] Altere o font-size de .hero h2 para 2.5rem (ou 3rem para um impacto maior).
[ ] Altere o font-size de .hero p para 1.1rem.
[ ] Altere o font-size do button para 1rem.
[ ] Altere o padding do header para 1rem 0.
[ ] Altere o margin do .container para 2rem auto.
[ ] Altere o padding do .container para 0 1.25rem.
[ ] Altere o padding do footer para 1.25rem 0.

Dica: Ao definir font-size: 16px; no html, 1rem será igual a 16px. Se você mudar o font-size do html para 10px (uma técnica comum para facilitar cálculos, já que 1rem = 10px), todos os seus rems escalarão proporcionalmente.

2. Layout Fluido com `%` e `vw` 🌊

[ ] Altere a largura do .container para 90%, mantendo o max-width: 1200px. Isso fará com que ele ocupe 90% da largura da tela, mas não mais que 1200px.
[ ] Altere o font-size de .hero h2 para 5vw (além do rem já definido). Isso fará com que o título principal escale com a largura da viewport. Use min() ou max() para limitar o tamanho se desejar (ex: font-size: min(5vw, 3rem);).

3. Componente Flexível com `em` 📦

[ ] No .card, defina um font-size de 1.1em. Isso fará com que o texto dentro do card seja 10% maior que o font-size padrão do card (que por sua vez herdará do body ou html).
[ ] No .card, defina o padding para 1.5em. Observe como o padding se ajusta ao tamanho da fonte do próprio card.
[ ] Altere o min-width do .card para 45% para que ele ocupe quase metade da tela em dispositivos maiores.

4. Introdução a Media Queries 📱

Vamos usar Media Queries para adaptar o layout em diferentes tamanhos de tela.

[ ] Crie uma Media Query para telas com min-width de 768px. Dentro dela:
- Altere o background-color do body para #e0ffe0 (um verde claro).
- Altere o font-size do html para 18px.
- Altere o padding do nav ul para 0 20px.
[ ] Crie uma Media Query para telas com min-width de 1024px. Dentro dela:
- Altere o background-color do body para #e0f0ff (um azul claro).
- Altere o font-size do html para 20px.
- Altere o flex-direction da nav ul para row (certifique-se que já está row ou column por padrão para telas menores).
[ ] Crie uma Media Query para telas com max-width de 600px (para smartphones). Dentro dela:
- Altere o flex-direction de nav ul para column e align-items: center;.
- Altere o padding do .hero para 20px.
- Altere o flex-direction da .cards-section para column e align-items: center;.
- Altere a largura do .card para 90% para que eles ocupem a maior parte da largura da tela.

🧪 Testando seu Layout

Abra o arquivo index.html no seu navegador. Redimensione a janela do navegador lentamente e observe como:

A cor de fundo do body muda.
Os tamanhos de fonte escalam.
O layout dos cards e da navegação se adapta.

Parabéns! Você está no caminho certo para criar sites verdadeiramente responsivos. 🎉

✅ Resumo e Próximos Passos

Nesta aula, exploramos as Unidades de Medida em CSS, distinguindo entre as unidades absolutas (como px) e as unidades relativas (como em, rem, %, vw, vh, fr). Entendemos a importância das unidades relativas para criar layouts flexíveis e adaptáveis.

Em seguida, mergulhamos nas Media Queries, a ferramenta essencial para aplicar estilos CSS condicionalmente, com base nas características do dispositivo. Aprendemos a sintaxe básica, os diferentes tipos de media features e como usar breakpoints para adaptar nossos designs.

Com os exercícios práticos, você teve a oportunidade de aplicar esses conceitos, transformando um layout estático em uma experiência responsiva.

O que vem a seguir? 🚀

Pratique mais! Experimente diferentes breakpoints e combine unidades de medida.
Aprofunde-se em Flexbox e Grid: Essas são as ferramentas de layout mais poderosas do CSS e se combinam perfeitamente com unidades relativas e Media Queries.
Considere min(), max(), clamp(): Funções CSS modernas que permitem definir tamanhos com limites, oferecendo ainda mais controle sobre a responsividade.
Explore mais Media Features: Descubra outras características como prefers-color-scheme (para modo escuro), prefers-reduced-motion e muito mais!

Continuem codificando e experimentando! A prática leva à perfeição no desenvolvimento web. 💪

Fundamentos da Web com HTML e CSS

Unidades de Medida e Introdução a Media Queries