RWD - Mídias Fluídas e Consultas de Mídia

Exercício 1

Crie uma página chamada rwd-query-font.html com um título e um parágrafo de texto. No CSS, utilize as consultas de mídia (@media) para fazer as seguintes alterações: quando a largura da tela for maior que 768px, o título (h1) deve ter 36px e o parágrafo, 16px. Quando a largura da tela for menor que 768px, o título deve reduzir para 24px e o parágrafo para 14px. Para conseguir chegar aos valores em pixel do tamanho das fontes, utilize a unidade rem no seu documento.

Exercício 2

Você foi encarregado de criar um menu de navegação para um site que deve se adaptar a diferentes tamanhos de tela. O menu contém quatro links de navegação (Início, Sobre, Serviços e Contato). Em telas grandes, os links devem ser exibidos horizontalmente. Em telas menores que 768px, os links devem se reorganizar verticalmente. O resultado deve ficar semelhante ao exemplo abaixo:

Exercício 3

Imagine que você está desenvolvendo a página de produtos de uma loja virtual. Seu objetivo é criar um card de produto que contenha uma imagem, título, descrição e um botão de “comprar”. Em telas maiores, a imagem deve ficar ao lado do texto, com o título, descrição e botão alinhados verticalmente. Em telas menores, todo o conteúdo deve se reorganizar em uma única coluna, com a imagem acima do texto e botão. O resultado deve ficar semelhante ao exemplo abaixo:

O código para o botão está disponível abaixo:

button {
  padding: 0.75rem 1.5rem;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}