Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 12 - HTML Responsivo

Layout responsivo

Nesta videoaula, você aplicará os conceitos de responsividade para criar layouts responsivos.

Para isso, será utilizado o exemplo de layout criado em aulas anteriores, utilizando a tecnologia FlexBox.

A ideia é criar um layout que se adapte a dispositivos pequenos, como smartphones. Para isso, uma técnica comum é alterar a disposição dos elementos que ficam lado a lado para um abaixo do outro. Essa organização, no nosso caso, é controlada pelo atributo "flex-direction", que pode ser alterado através das medias queries.

Acompanhe o exemplo abaixo que muda o "flex-direction" de "row" para "column", quando a resolução da tela é menor que 768px.

HTML
CSS
JS
​x
1
 <!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
  <title>Layout div</title>
8
 <link rel="stylesheet" type="text/css" href="style.css">
9
</head>
10
<body>
11
  <header>
12
    <h2>Cidades</h2>
13
  </header>
14
  <section>
15
    <nav>
16
      <ul>
17
        <li><a href="#">Londres</a></li>
18
        <li><a href="#">Paris</a></li>
19
        <li><a href="#">Rio de Janeiro</a></li>
20
      </ul>
21
    </nav>
22
    <article>
23
      <h2>Londres</h2>
24
​
25
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore qui sed numquam nam quo obcaecati,
26
        doloremque praesentium similique sequi quia nihil eaque fuga optio cumque beatae voluptatem at architecto ipsa.
27
      </p>
28
    </article>
29
  </section>
30
  <footer>
31
    <p><a href="http://imd.ufrn.br">www.imd.ufrn.br</a></p>
32
  </footer>
33
</body>
34
</html>
68
1
 body{
2
  font-family: Arial, Helvetica, sans-serif;
3
}
4
​
5
header {
6
  background-color: gray;
7
  color: white;
8
  padding: 30px;
9
  text-align: center;
10
}
11
​
12
section{
13
  display: flex;
14
  flex-direction: row;
15
}
16
​
17
nav{
18
  flex: 1;
19
  background-color:#ccc;
20
  padding: 0px;
21
  box-sizing: border-box;
22
}
23
​
24
nav ul {
25
  list-style-type: none;
26
  padding: 0px;
27
}
28
​
29
nav li {
30
  padding: 10px;
31
  margin-top: 1px;
32
}
33
​
34
nav li:hover{
35
  background-color: white;
36
  cursor: pointer;
37
}
38
​
39
article {
40
  flex: 4;
41
  background-color:rgb(238, 238, 238);
42
  box-sizing: border-box;
43
  padding: 20px;
44
}
45
​
46
footer {
47
  background-color:#777;
48
  color: white;
49
  padding: 20px;
50
  text-align: center;
51
}
52
​
53
footer a{
54
  color: white;
55
  text-decoration: none;
56
}
57
​
58
a{
59
  text-decoration: none;
60
  color: black;
61
}
62
​
63
@media only screen and (max-width: 768px){
64
  section {
65
      flex-direction: column;
66
  }
67
}
68
1
1

[A] Anterior
6/7
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados