JAMES WEB

Aprenda como se faz.

Sumário

Sites responsivos com media queries

A responsividade, no contexto do design da web, refere-se à capacidade de um site ou aplicativo se adaptar e funcionar de maneira eficaz em diferentes dispositivos e tamanhos de tela. Isso inclui desktops, laptops, tablets, smartphones e outros dispositivos com acesso à internet.

dcss-responsivo

Sites responsivos

Quando um site é responsivo, seu layout, conteúdo e elementos de interface são ajustados dinamicamente para se adequarem ao tamanho e à resolução da tela do dispositivo em que está sendo visualizado. Isso é importante porque os dispositivos têm uma variedade de tamanhos de tela, proporções de tela e orientações (paisagem ou retrato), e os usuários esperam uma experiência consistente e de alta qualidade, independentemente do dispositivo que estão usando.

A diretiva @media em CSS é usada para aplicar estilos diferentes com base em características específicas do dispositivo, como largura da tela, altura da tela, orientação (paisagem ou retrato), densidade de pixels, etc. Isso permite criar páginas da web responsivas, que se adaptam a diferentes dispositivos e tamanhos de tela.

Veja um exemplo:

?
1
2
3
4
@media only screen and (max-width: 600px) {
    .example {background: red;}
}
    

Explicando em detalhes o código:

  • @media: Esta é a diretiva de regra de mídia em CSS. Ela indica que o bloco de estilos dentro das chaves {…} será aplicado apenas se determinadas condições de mídia forem atendidas;
  • only screen: Este é o tipo de mídia para o qual as regras de estilo serão aplicadas. Neste caso, only screen especifica que as regras de estilo serão aplicadas apenas em dispositivos de tela, como monitores, tablets e smartphones;
  • (max-width: 600px): Esta é a condição de mídia. Neste caso, especifica que as regras de estilo serão aplicadas apenas quando a largura da tela for igual ou inferior a 600 pixels;
  • {…}: Este é o bloco de estilos que será aplicado se a condição de mídia for atendida. No código fornecido, o estilo background: red; será aplicado aos elementos com a classe .example quando a largura da tela for igual ou inferior a 600 pixels.

Exemplo prático @média CSS:

No exemplo prático abaixo o parágrafo com a classe “exemple” muda a cor de fundo de acordo com a largura da tela do dispositivo para vermelho, verde, azul, laranja e/ou rosa.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
 
.example {
padding: 20px;
color: white;
}
 
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
 
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
 
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
 
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
 
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
 
</style>
 
<h2>Typical Media Query Breakpoints</h2>
 
<p class=”example”>Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>

Redimensione a janela do navegador para ver como a cor de fundo deste parágrafo muda em diferentes tamanhos de tela.

No nosso site James Web as imagens em telas grandes, como em PC e Tablets, são posicionadas do lado direito dos textos. Em telas menores, como dos smartphones, as imagnes ficam na mesma colunas e entre os textos, com um layout que facilita a leitura.

Posts relacionados:

  • CSS – DNA da internet

Sumário: CSS – o DNA da Internet
Descubra como o CSS deixa seu sute mais bonito, funcional e dinâmico.

Books
Veja outros títulos do James Web.