Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resolução de Atividades - "06 Lista de exercícios"

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Adaptando elementos e atividade Lista de exercícios

por Victor Moreira Rodrigues
| 24.8k xp | 84 posts
Estudante

1 - Adaptando imagens para diferentes tamanhos de tela

HTML - index:

<img class = "apresentacao__imagem" src = "./Assets-aula2-curso3-html-e-css-main/Imagem.png" alt = "Foto da Joana Santos programando">

CSS:

.apresentacao__imagem {

    width: 50%;
}

Teste:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 - Ajustando o layout para diferentes dispositivos

CSS:

.apresentacao__conteudo {

    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__navegacao__link {

    width: 50%;
    text-align: center;
    padding: 16px 0px;
    border: 2px solid var(--cor-destaque);
    border-radius: 8px;
    font-family: var(--fonte-paragrafo);
    font-weight: 600;
    font-size: 1.5rem;            /* 24 / 16 = 1.5REM */
    text-decoration: none;
    color: var(--cor-texto);
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
}

3 - Responsividade do conteúdo de texto

CSS:

.apresentacao__conteudo {

    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

Teste:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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

CSS:

.apresentacao__navegacao__link {

    width: 50%;
    text-align: center;
    padding: 16px 0%;
    border: 2px solid var(--cor-destaque);
    border-radius: 8px;
    font-family: var(--fonte-paragrafo);
    font-weight: 600;
    font-size: 1.5rem;            /* 24 / 16 = 1.5REM */
    text-decoration: none;
    color: var(--cor-texto);
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
}

Teste:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Tentei ir ajustando, mas não deu muito certo. Tem alguma fórmula de conversão de pixels para porcentagem? Para REM é dividir por 16, teria uma para porcentagem? Eu percebi também que o tamanho das fontes não estão alterando, mesmo sendo REM.

1 resposta
solução!
por Rafaela Petelin Silvério
| 946.2k xp | 2102 posts
Alura Scuba Team

Oi, Victor! Como vai?

1. Conversão de pixels para % (porcentagem)

Diferente do rem, não há uma fórmula fixa para converter px para %, porque o % depende sempre do elemento pai:


<div style="width: 400px;">
  <div style="width: 50%;">Esse tem 200px de largura</div>
</div>

Nesse caso, 50% é igual a 200px, pois o pai tem 400px.

Já o rem é relativo ao tamanho da fonte raiz (html), geralmente 16px. Então:


24px / 16 = 1.5rem

2. Sobre a fonte não redimensionar com rem

Mesmo usando rem, se o <html> não mudar o font-size, a responsividade não acontece sozinha.

Você precisa configurar isso com media queries, tipo assim:


html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

Com isso, todo texto em rem vai se adaptar ao tamanho da tela.

3. Ajuste de largura em % + responsividade

Se quiser que a imagem ou elementos fiquem com 100% da largura do container, use:


.apresentacao__imagem {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Assim a imagem nunca vai ultrapassar 400px, mas se adapta em telas menores.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

  Caso este post tenha lhe ajudado, por favor, marcar como solucionado