Media Query. Colocando em prática seu uso.

No artigo anterior sobre media queries nós falamos o que eram e como funcionam, agora iremos colocar em prática o que aprendemos através da criação de cards responsivos que se adaptam conforme o tamanho da tela.

Durante o desenvolvimento da nossa página irei utilizar o VS Code como editor de código fonte, mas caso queira utilizar outro editor ou IDE pode ficar à vontade.

Para iniciamos com o desenvolvimento da nossa página, precisamos criar nosso arquivo HTML, e para isso, realizaremos os seguintes passos:

1. Criaremos uma pasta na área de trabalho com o nome de Media_query.

2. Em seguida, abriremos o VS Code e iremos até Arquivo > Abrir pasta… em seguida selecionamos a pasta Media_query.

3. Após realizamos os passos anteriores, digitamos no atalho do teclado ctrl+n que abrirá um novo arquivo para edição.

4. Após isso, usando o atalho ctrl+s salvaremos nosso arquivo com o nome index.html

Curso HTML5 + CSS3 - Fundamentos

Conhecer o curso

Criando cards responsivos com media query

Para criamos nossos cards responsivos usando media query, antes vamos estruturar nosso HTML e CSS3.

Observando a imagem a cima, podemos visualizar o primeiro ícone ao lado do nome da nossa pasta Media_query onde criaremos nosso arquivo CSS, apenas clicando e digitando o nome do nosso arquivo com sua extensão.

Agora voltando ao HTML, ao digitamos ht e já podemos observar serem oferecidas opções de versões do HTML, e escolheremos o html:5 para o nosso projeto.

Em seguida, partiremos para importação de links externos, onde podemos adicionar o seguinte trecho de código para importar a nossa fonte do texto, direto do Google fontes, mas só será necessário, caso você não deseje utilizar as atuais já disponíveis pelo seu sistema operacional. Para facilitar, vamos apenas copiar a que está presente no link abaixo e adicionar na tag head:

 <link href="https://fonts.googleapis.com/css2family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"/>

Em seguida, faremos o mesmo com a importação do nosso link CSS:

 <link rel="stylesheet" href="style.css" />

Para darmos continuidade com o código HTML, será necessário criar uma tag main, que define o conteúdo principal dentro da tag body, depois adicionarmos tags article, que definem que cada card será um artigo no conteúdo da nossa página.

E, dentro dessas seções, adicionaremos as tags h3 e a para adicionamos um pequeno texto.

Curso HTML5 + CSS3 - Apresentação de Dados

Conhecer o curso

<main class="cards">
  <article class="card first">
    <h3>Lorem ipsum</h3>
    <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
  </article>
  <article class="card second">
    <h3>Lorem ipsum</h3>
    <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
  </article>
  <article class="card third">
    <h3>Lorem ipsum</h3>
    <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
  </article>
</main>

Primeiro, estilizaremos os nossos cards. Adicionaremos alguns estilos ao corpo da nossa página, lembrando que essas modificações estarão presentes em todo o nosso body.

Seguimos, assim, para nossa modificação inicial onde utilizaremos o seletor *, através desse seletor iremos definir que a nossa página possuirá uma margem de zero e um preenchimento lateral de zero.

Continuando o nosso exemplo, no main, definimos uma cor ao fundo usando background, em seguida, definimos um tamanho para nosso flex com height e width, em sequência, alinhamos o nosso conteúdo ao centro com justify-content e align-items.

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

main {
  background: white;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #434343;
  font-size: 16px;
}

Seguindo para estilização dos cards, adicionamos um display-flex aos cards, incluímos uma cor, um formato de borda e um tamanho. Acrescentamos, um flex-direction para que o título fique abaixo do texto e não ao lado, depois, com o padding adicionamos um preenchimento interno para dar um maior espaçamento entre a borda, o título e o texto.

.cards {
  display: flex;
  padding: 32px;
}

.cards article.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgb(101, 152, 199);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  max-height: 468px;
  margin-left: 32px;
  color: white;
}

Inserimos uma pequena estilização ao texto:

.cards article.card h3 {
  font-size: 100%;
  margin: 16px 0;
}

.cards article.card a {
  font-weight: 300;
  max-width: 240px;
  font-size: 80%;
  margin-bottom: 16px;
}

E por fim, para tornar nossos cards responsivos, adicionamos uma nova estilização ao cair na condição do media query.

@media screen and (max-width: 720px) {
  .cards {
    flex-direction: column;
  }

  .cards article.card {
    margin-left: 0;
    margin-bottom: 32px;
  }
}

Criamos um modelo de media, inserimos uma condição para que o screen pegue no tamanho máximo de 720px do breakpoint, colocamos os cards em coluna após a condição ser confirmada e adicionamos um margin-bottom.

Curso HTML5 + CSS3 - Dominando o Flexbox

Conhecer o curso

Agora, vamos visualizar o resultado do HTML e CSS.

Código HTML:

<!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 href="https://fonts.googleapis.com/css2family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <main class="cards">
      <article class="card first">
        <h3>Lorem ipsum</h3>
        <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
      </article>
      <article class="card second">
        <h3>Lorem ipsum</h3>
        <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
      </article>
      <article class="card third">
        <h3>Lorem ipsum</h3>
        <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
      </article>
    </main>
  </body>
</html>

Código CSS:

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

main {
  background: white;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #434343;
  font-size: 16px;
}

.cards {
  display: flex;
  padding: 32px;
}
.cards article.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgb(101, 152, 199);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  max-height: 468px;
  margin-left: 32px;
  color: white;
}
.cards article.card h3 {
  font-size: 100%;
  margin: 16px 0;
}

.cards article.card a {
  font-weight: 300;
  max-width: 240px;
  font-size: 80%;
  margin-bottom: 16px;
}

@media screen and (max-width: 720px) {
  .cards {
    flex-direction: column;
  }

  .cards article.card {
    margin-left: 0;
    margin-bottom: 32px;
  }
}

Agora, com todas as etapas já concluídas, poderemos realizar o teste de responsividade:

Neste último exemplo, usamos o DevTools do Google Chrome para medir o nível de responsividade dos nossos cards. Para iniciá-lo, precisamos apenas clicar com o botão direito e clicar novamente na opção inspecionar, em seguida surgiram muitas opções que serão muito uteis para todos nós.

Conclusão

Curso HTML5 + CSS3 - Dominando o CSS Grid Layout

Conhecer o curso

Neste artigo aprendemos a estilizar cards responsivos, seguindo o passo-a-passo e criando um arquivo HTML e CSS. Finalizamos assim, a criação da nossa página com um exemplo sobre responsividade e vimos na prática como podemos usar os media queries.