Entrar Ainda não tem acesso?
1
resposta

Layout diferente em monitor maior

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por Lucas Teixeira
| 37k xp | 12 posts

Oi!

Eu fiz o curso completo em meu notebook de 13 polegadas. Recentemente comprei um monitor de 27 polegadas e ao abrir as páginas "bio" e "blog" do João da Silva, percebo que o layout está um pouco diferente. O tamanho e a distância da imagem e do aside muda de acordo com o tamanho da janela.

Para explicar melhor, eu tirei print screen pra postar aqui as imagens para vocês verem como estão aparecendo pra mim haha

http://i65.tinypic.com/2qxuvi8.png (janela em tela cheia)

http://tinypic.com/r/29g233b/9 (janela encolhida)

http://i66.tinypic.com/6f6znm.png (O tamanho da janela que deveria ser para ter o layout certo)

Isso é normal ou eu tenho que arrumar o layout no CSS para ele sempre aparecer "certo"?

Atualmente o CSS está assim:

.minha-foto, .navegacao-site {
    float: right;
    box-sizing: border-box;
    border-left: 10px solid black;
    border-bottom: 10px solid black;
}

.minha-foto {
    position: absolute;
    top: 0;
    right: 0;
}

.navegacao-site {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
    width: 15%;
    clear: right;
    position: relative;
    top: 310px;
}

Muito obrigado desde já.

1 resposta
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Lucas, tudo bem?

Isso de fato acontece e está relacionado à responsividade do site. Em que aula do curso você está? Pelo que vejo do seu código ainda não foram feitas as estilizações necessárias para adaptação da página para diferentes dispositivos.

Mas explicando um pouquinho sobre o assunto, as imagens irão se comportar responsivamente à medida que você definir os breakpoints que a sua página irá conter, ou seja, a imagem irá "acompanhar" o tamanho da resolução da tela em que sua página irá ser carregada.

Por exemplo, se umaimagem que você está querendo carregar tem 600 px, mas ela ficará muito grande para um dispositivo pequeno, como um celular, então, você definirá com o auxílio do @media (https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries) colocando a largura máxima ou mínima (do dispositivo) e qual o tamanho ou ajuste terá sua imagem.

Ex.:

@media (max-width: 560px) {
  .imagem {
    height: auto;
}

Em um dispositivo com no máximo de largura de 560px, o height dela irá automaticamente se ajustar para que a exibição, nesse dispositivo, fique perfeita.

Esse texto pode ajudar também: https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding/Responsive_images

Espero ter te esclarecido! :}