Objetivos da Aula

Introdução

Fala programador, tudo bem com você? Nessa aula aqui nós vamos trabalhar na prática com a responsividade. Nós vamos entender como se aplica e como faremos para começar a utilizar ela nos nossos projetos.

Visualização do layout

  1. Nós vamos criar esse layout aqui, ele está aqui no snnipet de tamanho reduzido, você pode ver 100% na aula, busque criar ele antes de continuarmos 😀

    Untitled

Criando o layout (HTML)

  1. Nós iremos começar criando o html. Vamos colocar o layout padrão, mudando para pt-br e colocando o título na página.

    <!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsividade</title>
</head>

<body>

</body>

</html>

  2. Agora, você pode baixar aqui as imagens que vamos utilizar nesse nosso teste de responsividade. Você vai colocar na mesma pasta que criamos essa pasta de imagens. ⇒ https://drive.google.com/drive/folders/1KnHREpKkLe1WRC2-oTUKCtN3uuf4e0uw?usp=sharing

  3. Com as imagens prontas, vamos então colocar as imagens com os textos lorem logo abaixo.

    <!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Responsividade</title>
</head>

<body>
  <img src="./imagens/01.jpg" alt="img-01">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis rem veritatis, a officia,
    molestias cumque vero
    incidunt doloremque reiciendis aliquid repudiandae vitae, et illum explicabo? Praesentium illum hic voluptatibus
    maxime esse numquam eius ad deleniti.</p>

  <img src="./imagens/02.jpg" alt="img-02">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, aspernatur. Deserunt
    excepturi vitae enim non
    nihil expedita, hic porro deleniti voluptatum quas quos tempora voluptatem.</p>

  <img src="./imagens/03.jpg" alt="img-03">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa architecto mollitia libero
    nesciunt fugiat nihil?</p>
</body>

</html>

  4. E por último, nós iremos colocar as classes nos parágrafos e nos textos.

    <!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Responsividade</title>
</head>

<body>
  <img src="./imagens/01.jpg" alt="img-01" class="img-content">
  <p class="text-content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis rem veritatis, a officia,
    molestias cumque vero
    incidunt doloremque reiciendis aliquid repudiandae vitae, et illum explicabo? Praesentium illum hic voluptatibus
    maxime esse numquam eius ad deleniti.</p>

  <img src="./imagens/02.jpg" alt="img-02" class="img-content">
  <p class="text-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, aspernatur. Deserunt
    excepturi vitae enim non
    nihil expedita, hic porro deleniti voluptatum quas quos tempora voluptatem.</p>

  <img src="./imagens/03.jpg" alt="img-03" class="img-content">
  <p class="text-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa architecto mollitia libero
    nesciunt fugiat nihil?</p>
</body>

</html>

Modificando o css

  1. Agora, indo para o css, nós vamos colocar um tamanho fixo nas imagens. Vamos colocar tanto de largura quanto altura.

    .img-content {
  width: 765px;
  height: 400px;
}

  2. Depois disso, nós vamos colocar um tamanho de fonte e também uma outra família de fonte.

    .text-content {
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
}

  3. Com isso, nós vamos o nosso layout montado, faltando apenas a responsividade.

Partindo para a responsividade

  1. Como nós aprendemos na aula passada, vamos verificar a responsividade dessa nossa página, clicando em F12/inspecionar. Diminuindo a página, vamos ver que em 765 px a página começa a quebrar, pois é o tamanho fixo da nossa imagem.

  2. Nós vamos então, utilizar o primeiro media query. Nós vamos utilizar ele em 795px, para ficar melhor de ver. O media query é feito a partir de um “max-width”. Quando esse width é atingido, nós vamos ter a implementação do estilo que está dentro do media query, mas mudando apenas coisas que nós colocarmos, não vai mudar tudo da página.

  3. Para exemplo, vamos colocar o body com um background preto com textos brancos, e dentro desse nosso media query, colocar um background vermelho quando atingir os 795px.

    body {
  background-color: black;
  color: white;
}
@media (max-width: 795px) {
  body {
    background-color: red;
  }
}