Lista de Exercício

1) Adaptando imagens para diferentes tamanhos de tela

HTML:

<img src="sua-imagem.jpg" class="apresentacao__imagem" alt="Imagem responsiva">

CSS:

.apresentacao__imagem {
  width: 50%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
}

/* Opcional: Ajuste fino para telas menores */
@media (max-width: 720px) {
  .apresentacao__imagem {
    width: 70%; 
  }
}

2) Ajustando o layout para diferentes dispositivos

CSS:

/* Layout base */
.container {
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

/* Media Query para notebooks */
@media (max-width: 1280px) {
  .container {
    flex-direction: column;
    padding: 1rem;
  }
}

/* Media Query para tablets */
@media (max-width: 720px) {
  .container {
    gap: 1rem;
    padding: 0.5rem;
  }
}

3) Responsividade do conteúdo de texto

CSS:

.apresentacao__conteudo {
  width: 50%; 
  margin: 0 auto; 
  font-size: 1rem; 
  line-height: 1.5; 
}

/* Ajustes para telas menores */
@media (max-width: 720px) {
  .apresentacao__conteudo {
    width: 90%; 
    font-size: 0.9rem; 
  }
}

4) Melhorando a responsividade dos links de navegação

CSS:

.apresentacao__links__navegacao {
  width: 50%; 
  min-width: 200px; 
  padding: 1rem;
  margin: 0.5rem auto; 
  text-align: center;
  display: block; 
}

/* Ajustes para mobile */
@media (max-width: 480px) {
  .apresentacao__links__navegacao {
    width: 100%; 
    padding: 0.8rem; 
    font-size: 0.9rem;
  }
}