Media Query. Colocando em prática seu uso. \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 27 Min 49 Seg Tempo restante da oferta: 02 27 49 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Media Query. Colocando em prática seu uso. [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) # Media Query. Colocando em prática seu uso. Neste artigo, nós iremos aprender sobre o uso de Media Query no CSS3, na prática aprendendo como utilizar na criação de cards responsivos. [ Redação Treinaweb ](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-2.png) [No artigo anterior sobre media queries](https://www.treinaweb.com.br/blog/media-queries-o-que-sao-e-como-usar-no-css) 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](https://www.treinaweb.com.br/blog/instalacao-do-vs-code-no-windows-linux-e-macos) como [editor de código fonte](https://www.treinaweb.com.br/blog/principais-editores-de-codigo-para-desenvolvimento), mas caso queira utilizar outro editor ou [IDE](https://www.treinaweb.com.br/blog/o-que-e-uma-ide-ambiente-de-desenvolvimento-integrado) 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**. ![Vscode-exemplo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-Tela-149.png) 3. Após realizamos os passos anteriores, digitamos no atalho do teclado `ctrl+n` que abrirá um novo arquivo para edição. ![Vscode-exemplo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-Tela-150.png) 4. Após isso, usando o atalho `ctrl+s` salvaremos nosso arquivo com o nome `index.html` [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) ## Criando cards responsivos com media query Para criamos nossos cards responsivos usando media query, antes vamos estruturar nosso HTML e CSS3. ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-Tela-160.png) 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. ![media-query](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-Tela-155.png) 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. ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-Tela-157.png) 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`: ```html ``` Em seguida, faremos o mesmo com a importação do nosso link CSS: ```html ``` 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. [ ![HTML5 + CSS3 - Apresentação de Dados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Apresentação de Dados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados) ```html Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. ``` ![media-query](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-tela-2022-08-18-002950.png) 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`. ```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; } ``` ![media-query](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-tela-2022-08-18-003528.png) 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. ```css .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; } ``` ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-tela-2022-08-18-003807.png) Inserimos uma pequena estilização ao texto: ```css .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; } ``` ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-tela-2022-08-18-004006.png) E por fim, para tornar nossos cards responsivos, adicionamos uma nova estilização ao cair na condição do media query. ```css @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`. [ ![HTML5 + CSS3 - Dominando o Flexbox](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o Flexbox Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox) Agora, vamos visualizar o resultado do HTML e CSS. Código HTML: ```html Document Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. ``` Código CSS: ```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: ![media-query](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/Captura-de-tela-2022-08-18-004246.png) 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 [ ![HTML5 + CSS3 - Dominando o CSS Grid Layout](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o CSS Grid Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout) 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. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #media query ](https://www.treinaweb.com.br/blog/tag/media-query) - [ #página responsivas ](https://www.treinaweb.com.br/blog/tag/pagina-responsivas) Autor ![Redação Treinaweb](//secure.gravatar.com/avatar/662942287935c97e547cfc12c04be6e5?d=mm) ## Redação Treinaweb [Todos os artigos](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Media queries, o que são e como usar no CSS? ](https://www.treinaweb.com.br/blog/media-queries-o-que-sao-e-como-usar-no-css) Neste artigo, nós iremos aprender sobre o uso de media queries no CSS e iremos aprender como utilizá-los em nossas aplicações web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ASP-NET-ODATA-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Adicionando OData em uma API ASP.NET Core ](https://www.treinaweb.com.br/blog/adicionando-odata-em-uma-api-asp-net-core) OData é um padrão de boas práticas para a criação de API. Veja os recursos que este padrão fornece para uma API ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/onde-come-ar-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 10 anos atrás ## [ Quero programar: Por onde começar? ](https://www.treinaweb.com.br/blog/quero-programar-por-onde-comecar) Veja os procedimentos recomendados para se tornar um programador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/LAYOUT-FLUTTER-RESPONSIVO-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 5 anos atrás ## [ Como construir um layout Flutter responsivo ](https://www.treinaweb.com.br/blog/como-construir-um-layout-flutter-responsivo) Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativos responsivos com Flutter . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/31150916/gatilhos-mentais-400x280.jpg) [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 8 anos atrás ## [ Gatilhos Mentais Que Envolvem e Influenciam Clientes ](https://www.treinaweb.com.br/blog/gatilhos-mentais-que-envolvem-e-influenciam-clientes) Neste artigo vamos aprender as maiores técnicas de persuasão do neuromarketing, os gatilhos mentais, recursos que ativam ações no nosso cérebro. Aprenda a implementar isso no seu negócio. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/06113752/streaming-api-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ ASP.NET Core - Criando uma Streaming API ](https://www.treinaweb.com.br/blog/asp-net-core-criando-uma-streaming-api) Streaming não se resume apenas a conteúdo de media. Aprenda neste artigo como criar uma streaming API de dados no ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/complexity-code-copy-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Ferramenta para avaliar a complexidade de código escrito em PHP ](https://www.treinaweb.com.br/blog/ferramenta-para-avaliar-a-complexidade-de-codigo-escrito-em-php) Conheça um pouco mais sobre a phploc, ferramenta para avaliar a complexidade de código escrito em PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/prototipagem-armadilha-400x280.jpg) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 10 anos atrás ## [ Prototipagem e suas armadilhas ](https://www.treinaweb.com.br/blog/prototipagem-e-suas-armadilhas) Protótipos fazem parte do dia a dia da equipe de design, mas como podemos otimizar e maximizar a sua eficácia? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/estruturas-condicionais-e-de-repeticao-no-python-1-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Estruturas condicionais e de repetição no Python ](https://www.treinaweb.com.br/blog/estruturas-condicionais-e-de-repeticao-no-python) Neste artigo, conheceremos as estruturas condicionais e de repetição no Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/qual-computador-comprar-para-programar-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 6 anos atrás ## [ Qual computador comprar para programar? ](https://www.treinaweb.com.br/blog/qual-computador-comprar-para-programar) Saiba tudo o que precisa para comprar um computador para programar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/09001515/CAPA-BURNDOWN-BURNOUT-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ Gráficos Burndown e Burnup: qual a diferença? ](https://www.treinaweb.com.br/blog/graficos-burndown-e-burnup-qual-a-diferenca) Confira neste artigo a diferença dos gráficos Burndown e Burnup, utilizados no monitoramento de projetos. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **02h 27min 49s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58