WDD 131: Fundamentos da Web Dinâmica

S02 – Atividades de Aprendizagem: Consultas de Mídia CSS

Visão Geral

As consultas de mídia CSS permitem que você use estilos diferentes ao seu site com base nas características do dispositivo usado para visualizá-lo. Também permitem que o site se adapte a diferentes tamanhos de tela, orientações e até mesmo preferências do usuário.

Objetivo(s) de Aprendizagem do Curso Adicional

Desenvolver páginas web responsivas que sigam as melhores práticas e usem HTML e CSS válidos.

Preparação

As consultas de mídia CSS são essenciais para um web design responsivo. A regra @media especifica condições que determinam quando um bloco de regras CSS deve ser usado. Isso permite que elementos selecionados sejam reposicionados, redimensionados, ocultados, expostos, entre outras coisas, de acordo com o tamanho da janela de visualização do usuário.

Aqui está a sintaxe geral para configurar uma consulta de mídia CSS:

@media not|only mediatype and (expressions) {
  /* As regras CSS vão dentro das chaves de abertura e fechamento da consulta @media {} */
}

Aqui está um exemplo de consulta de mídia CSS:

1️⃣ @media screen and (min-width: 640px) {
2️⃣   h1 {
3️⃣     font-size: 2.5rem;
4️⃣     margin: 1rem;
5️⃣     color: navy;
6️⃣   }
7️⃣ }

Explicação do Código

1️⃣ @media screen and (min-width: 640px) { é a linha de assinatura do bloco de consulta @media que usa regras CSS quando as condições especificadas são atendidas. Neste exemplo, as condições exigem que o tipo de mídia seja uma tela e que a largura da janela de visualização seja definida como pelo menos 640 pixels.

2️⃣ h1 { o seletor de elemento <h1> inicia a regra CSS definida.

3️⃣-5️⃣ font-size: 2.5rem; margin: 1rem; color: navy; são declarações a serem usadas para quaisquer elementos <h1> se as condições da consulta @media forem atendidas.

6️⃣ O primeiro } fecha a regra CSS para elementos de código <h1>.

7️⃣ O último } fecha a consulta de mídia.

Observe que as chaves { } são usadas para conter uma consulta de mídia específica e também para definir regras CSS. Um erro comum é fechar o contêiner de consulta @media muito cedo ou sequer fechar. Usar o recuo automático dos recursos de formatação de documentos do VS Code ajudará você a reconhecer problemas com sua sintaxe CSS.

Vídeo de Demonstração: ▶️ Consultas de Mídia (Media Queries)

Instruções da Atividade

Para esta atividade, você criará uma página HTML simples com dois arquivos CSS. Você usará consultas de mídia CSS para aplicar o arquivo CSS apropriado com base na largura da janela de visualização.

Um uso responsável de uma ferramenta de IA generativa poderia ser fazer perguntas sobre como formular um trecho de código específico. Por exemplo, "como combinar seletores em CSS?", e será dado um exemplo que você pode usar em seu próprio código.

Configuração de Arquivo e Pasta

  1. Adicione um novo arquivo HTML chamado "consulta-de-midia.html" em uma pasta "semana02" no seu repositório wdd131.
  2. Adicione dois arquivos CSS chamados "consulta-de-midia.css" e "consulta-de-midia-grande.css" a uma subpasta chamada "estilos" dentro da pasta semana02.

HTML

  1. No seu arquivo consulta-de-midia.html, crie uma página HTML válida com conteúdo de head padrão, incluindo:
    • Atributo Meta Charset
    • Elemento Meta Viewport
    • Elemento Title
    • Elemento Meta Description
    • Elemento Meta Author
    • Link para uma Google Font chamada "Roboto" usando o código contemporâneo incorporado fornecido por fonts.google.com
    • Vincule referências aos seus dois arquivos CSS.

    Exemplo

    <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WDD 131 – Exemplo de Consulta de Mídia</title>
  <meta name="description" content="Página de exemplo da atividade de aprendizagem sobre consulta de mídia.">
  <meta name="author" content="[Digite seu nome completo aqui]">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="estilos/consulta-de-midia.css">
  <link rel="stylesheet" href="estilos/consulta-de-midia-grande.css">
</head>
  2. No body do documento HTML, adicione um header com h1, um elemento main com dois elementos section e um elemento footer.
    1. O elemento h1 deve conter as palavras "Exemplo de Consulta de Mídia".
    2. Cada título da seção h2 contém uma escritura com livro, capítulo e versículo.
    3. O parágrafo da seção contém uma cópia da escritura real referenciada no título.
    4. O rodapé (footer) deve conter seu nome.

    Exemplo

    <header>
  <h1>Exemplo de Consulta de Mídia</h1>
</header>
<main>
  <section>
    <h2>2 Néfi 32:9</h2>
    <p>Mas eis que vos digo que deveis orar sempre e não desfalecer; e nada deveis fazer para o Senhor sem antes orar ao Pai, em nome de Cristo, para que ele consagre para vós a vossa ação, a fim de que a vossa ação seja para o bem-estar de vossa alma.</p>
  </section>
  <section>
    <h2>Helamã 12:24</h2>
    <p>E permita Deus, em sua grande plenitude, que os homens sejam levados ao arrependimento e às boas obras, para que lhes seja restituída graça por graça, segundo suas obras.</p>
  </section>
</main>
<footer>
  [Seu Nome Completo Aqui]
</footer>

CSS

  1. Estilize o documento conforme mostrado nas capturas de tela de exemplo fornecidas abaixo.
    1. consulta-de-midia.css
      1. Não inclua uma consulta de mídia.
      2. Use o Google Font – Roboto na regra de body.
      3. Elementos header, main e footer devem:
        1. Cada um tem uma largura máxima de 640 pixels
        2. Ser centralizados na página usando margin: 1rem auto
        3. Incluir uma borda tênue
        4. Usar padding apropriado
        5. Ter uma cor de fundo azulada de sua escolha

        Lembre-se de que você pode combinar esses três seletores em uma regra ou criar uma classe que contenha essas declarações CSS comuns.

      4. Declare o elemento principal como CSS Grid com um modelo de grade de apenas uma coluna e um intervalo igual de 1rem.

        Se você tiver alguma pergunta para fazer à turma no Microsoft Teams, use uma linguagem específica e descritiva. Por exemplo, "Tenho uma pergunta sobre a parte 5.1.4 da tarefa sobre consulta de mídia. Não sei como definir a grade do elemento main para apenas uma coluna com um intervalo uniforme de 1rem."

      5. Declare que os elementos da seção também tenham padding e um fundo mais claro ou branco.
      Avalie Seu Conhecimento 
      body {
  font-family: 'Roboto', sans-serif;
}

header, main, footer {
  max-width: 640px;
  margin: 1rem auto;
  border: 1px solid #bbb;
  padding: 1rem;
  background-color: #e6f2ff;
}

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

section {
  padding: 1rem;
  background-color: #fff;
}
  2. Em consulta-de-midia-grande.css:
    1. Escreva uma consulta de mídia de contenção a ser aplicada em uma largura de viewport de 500px ou maior.
      Avalie Seu Conhecimento 
      @media screen and (min-width: 500px)
    2. Usando a declaração dentro da consulta de mídia, altere o header para um fundo preto com texto branco.
    3. Altere o elemento main para exibir duas colunas de tamanho igual.
      Avalie Seu Conhecimento 
      grid-template-columns: 1fr 1fr;

Capturas de Tela de Exemplo

Captura de tela de exemplo de consulta de mídia em visualização móvel.
Captura de Tela do Telefone
Captura de tela de exemplo de consulta de mídia com visualização grande.
Captura de Tela de Visualização Mais Ampla
Exemplo de Solução

Exemplo de solução no CodePen ☼ Atividade de Consultas de Mídia CSS

Definindo Pontos de Interrupção

Os pontos de interrupção devem ser definidos para dar suporte ao design e ao conteúdo da página. Não há pontos de interrupção definidos para usar.

"Não defina pontos de interrupção com base em classes de dispositivos ou em qualquer produto, nome de marca ou sistema operacional. Isso dificulta a manutenção do código. Em vez disso, deixe o conteúdo determinar como o layout muda para se ajustar ao contêiner."

Como escolher pontos de interrupção – Web responsiva – Google Web Fundamentals

Teste

Você deve verificar continuamente o trabalho renderizado no seu navegador usando a extensão Live/Five Server.

  1. Teste seu trabalho redimensionando a janela do navegador ou usando as configurações do dispositivo DevTools para ver as mudanças no layout.
  2. Use o CSS Overview do DevTool do navegador para verificar o contraste de cores e outras propriedades CSS.
  3. Você precisará confirmar (commit) e enviar (push) seu trabalho para seu site wdd131 habilitado para GitHub Pages a fim de usar a Ferramenta de Auditoria de Página.