Curso IT Fundamentos CSS 033_Layout Responsivo

Layout Responsivo

O layout responsivo é um método de design de páginas web que se adapta a diferentes tamanhos de tela e dispositivos. Ao usar layout responsivo, é possível manter um bom efeito de exibição em diferentes dispositivos, seja em computadores desktop, tablets ou celulares.

Media Queries

Usar media queries CSS permite aplicar diferentes estilos com base nas características do dispositivo (como largura da tela, altura, tipo de dispositivo, etc.). Isso permite definir diferentes layouts para diferentes tamanhos de tela.

Exemplo:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* Tablet */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* Celular comum */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* Tela pequena */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

Efeito:

Imagens Responsivas

Use max-width: 100%; para garantir que imagens e elementos de mídia não ultrapassem seus contêineres em telas pequenas. Exemplo:

1
    img {
2
      max-width: 100%; /* Largura máxima da imagem é 100% do elemento contêiner */
3
      height: auto;    /* Mantém a proporção, evitando deformação da imagem */
4
    }
5

6
    /* Ajustar tamanho da imagem em telas pequenas */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* Largura máxima da imagem é 50% do elemento contêiner */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

Efeito:

Configuração da Viewport

Use a tag <meta> para configurar a viewport e garantir que a página seja dimensionada corretamente em dispositivos móveis.

Exemplo:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta meta tag informa aos navegadores móveis que eles devem definir a largura da viewport como a largura do dispositivo, ampliar o documento para 100% do tamanho esperado e exibir o documento no tamanho otimizado para dispositivos móveis.

Junto com a meta tag viewport, você pode usar outras configurações, mas geralmente a linha acima é o que você deseja usar.

• initial-scale: Define o zoom inicial da página, configurado como 1.
• height: Define uma altura específica para a viewport.
• minimum-scale: Define o nível mínimo de zoom.
• maximum-scale: Define o nível máximo de zoom.
• user-scalable: Se definido como no, bloqueia o zoom.

Evite usar minimum-scale, maximum-scale e especialmente definir user-scalable como no, para garantir que os usuários possam ampliar e reduzir por conta própria.