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.

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout div</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <h2>Cidades</h2>
  </header>
  <section>
    <nav>
      <ul>
        <li><a href="#">Londres</a></li>
        <li><a href="#">Paris</a></li>
        <li><a href="#">Rio de Janeiro</a></li>
      </ul>
    </nav>
    <article>
      <h2>Londres</h2>

      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore qui sed numquam nam quo obcaecati,
        doloremque praesentium similique sequi quia nihil eaque fuga optio cumque beatae voluptatem at architecto ipsa.
      </p>
    </article>
  </section>
  <footer>
    <p><a href="http://imd.ufrn.br">www.imd.ufrn.br</a></p>
  </footer>
</body>
</html>

 body{
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: gray;
  color: white;
  padding: 30px;
  text-align: center;
}

section{
  display: flex;
  flex-direction: row;
}

nav{
  flex: 1;
  background-color:#ccc;
  padding: 0px;
  box-sizing: border-box;
}

nav ul {
  list-style-type: none;
  padding: 0px;
}

nav li {
  padding: 10px;
  margin-top: 1px;
}

nav li:hover{
  background-color: white;
  cursor: pointer;
}

article {
  flex: 4;
  background-color:rgb(238, 238, 238);
  box-sizing: border-box;
  padding: 20px;
}

footer {
  background-color:#777;
  color: white;
  padding: 20px;
  text-align: center;
}

footer a{
  color: white;
  text-decoration: none;
}

a{
  text-decoration: none;
  color: black;
}

@media only screen and (max-width: 768px){
  section {
      flex-direction: column;
  }
}

Termo de uso

arrow_back Aula 12 - HTML Responsivo

Layout responsivo

Aula 12 - HTML Responsivo