Media queries, o que são e como usar no CSS? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 07 Min 38 Seg Tempo restante da oferta: 02 07 38 [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 queries, o que são e como usar no CSS? [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) # Media queries, o que são 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. [ 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.png) Atualmente podemos observar que as páginas web que desenvolvemos são acessadas pelos mais variados dispositivos, como computadores, celulares, tablets e até mesmo tv’s. Cada um desses dispositivos possui diferentes resoluções e formatos de tela. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) E para conseguirmos que nossos usuários possuam uma boa experiência nossas páginas devem ser capazes de se adequar à esses dispositivos, daí a necessidade de desenvolver páginas que são responsivas. Um dos recursos do CSS que podemos utilizar para alcançar esse objetivo é o recurso conhecido como media queries. Neste artigo iremos aprender o que são os media queries e também sobre a sua sintaxe, para que você possa acompanhar este artigo sem dificuldades é necessário possuir alguns conhecimentos básicos sobre HTML e CSS. Fica aqui a recomendação dos seguintes artigos caso precise refrescar a memória sobre esses tópicos: - [O que é e como começar com HTML e CSS?](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css) - [Seletores básicos no CSS](https://www.treinaweb.com.br/blog/seletores-basicos-do-css) - [Unidades de medida no CSS](https://www.treinaweb.com.br/blog/unidades-de-medidas-no-css) ## O que são Media Queries? Media query, nada mais é do que uma estrutura do CSS que permite aplicar estilizações especificas para uma página web de acordo com certas condições, fazendo assim com esta página possa se adequar ao layout de tela em diferentes tamanhos e tipos de mídia. A sintaxe básica ao utilizarmos media query é a seguinte: ```css @media (condição) { /* Estilizações CSS */ } ``` No exemplo acima, podemos observar a sintaxe dos media queries, primeiramente utilizamos a expressão `@media` e logo em seguida definimos a condição dentro dos parênteses. ## Tipos de media ou Media types Sua funcionalidade serve para direcionar determinado CSS para um meio específico de dispositivo, ou seja, definem para qual tipo de media, o CSS que você aplica em seu site será direcionado. Existem vários media types, aqui, citarei alguns: - **print**: Para impressoras; ```css @media print { /* Estilizações CSS */ } ``` - **screen**: Para monitores ou outros dispositivos como computadores, tablets e smartphones com telas coloridas e com resolução adequada; ```css @media screen and (max-width: 768px){ /* Estilizações CSS */ } ``` - **handheld**: Para dispositivos de mão. ```css @media handheld and (min-width: 700px) and (orientantion: landscape){ /* Estilizações CSS */ } ``` - **all**: Para todos os tipos de mídia. ```css @media all and (orientation: landscape){ /* Estilizações CSS */ } ``` ### Media features no media query Um media feature é a largura da janela do documento, normalmente usado para atribuir uma condição que vai testar se o que foi definido é verdadeiro ou falso, ou seja, são elementos do CSS que atribuídos a estrutura do media para exibir quando a estilização sofrerá modificação. De forma simplificada, podemos destacar alguns: - orientation - width - height O `orientation` possui dois possíveis valores, os quais são `portrait` e `landscape`, onde o primeiro define a orientação em retrato, ou seja, se a altura é maior ou igual à largura e o segundo, orientação paisagem seguindo o mesmo resultado citado antes Já o `width` define a largura do elemento na horizontal. E por último o `height` que define a altura do elemento na vertical. Muitos media features podem ter prefixado `min-` ou `max-`, ou seja, servem para definir a largura mínima ou máxima de uma condição, assim definindo se nossas estilizações serão aplicadas conforme o tamanho da tela. Vamos ver alguns exemplos: ```css @media (max-width:600px){ /* Estilizações CSS */ } @media (max-width:600px){ .Card-TreinaWeb{ flex-direction: column; } } ``` Neste exemplo, podemos observar que foi definido um tamanho máximo de tela, segundo o tamanho que se encontra dentro dos parênteses definido com `600px`, chamado de breakpoints, fazendo com que essa estilização só seja aplicada em dispositivos com telas maiores que `600px` de largura. Então, partimos para o segundo exemplo de código que mostrará o seu uso com media query para mínimo: ```css @media (min-width:500px){ /* Estilizações CSS */ } @media (min-width:500px){ .Card-TreinaWeb{ flex-direction: column; } } ``` Assim, observamos que foi definido o tamanho mínimo de tela para as nossas alterações. Como exemplo foi usado o `flex-direction: column`. Que indica que a partir deste tamanho a classe aplicada sofrer uma alteração e ficará em coluna. Nos próximos tópicos aprenderemos como adicionar operadores lógicos que facilitará e simplificará o uso desta explicação. ## O que é um operador lógico no media query e quais seus tipos? Um operador lógico pode ser uma comparação entre elementos ou resultados, e pode conter, uma negação entre os mesmos e, neste artigo falaremos sobre os operadores lógicos de media query que são: `and`, `or`, `only` e `not`. ### Operador lógico and no media queries: Este operador lógico é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeira, simplificando isso, no `and` às duas condições precisam ser verdadeiras para que sua media query funcione. Como no exemplo a seguir: ```css @media (min-widht: 769px) and (max-width: 1024px){ /* Estilizações CSS */ } ``` No exemplo anterior, você pode perceber que para a condição entrar no media seria necessário ter o mínimo de largura de `769px` e a máxima de `1024px` para o tamanho da tela. Está é uma pequena demonstração de como usar o operador `and`. ```css @media screen and (max-widht: 600px){ /* Estilizações CSS */ } ``` Neste outro exemplo, foi adicionado media type para condição do `and`. ### Operador lógico only no media queries: Usamos este operador para navegadores que não reconhecem estilos aplicados com media query. Como aplicar no CSS: ```css @media only screen and (max-width: 768px){ /* Estilizações CSS */ } ``` Neste exemplo usamos o operador `only` e o `and`, para definir o tamanho máximo que sua tela terá que atingir para serem feitas alterações. ### Operador lógico or no media queries: Este operador lógico é usado com o caractere `,` que simboliza que para ocorrer alteração no media, uma das condições definidas precisa ser verdadeira. Exemplo da condição: ```css @media (max-width: 30.5em), print and (orientation: portrait) { /* Estilizações CSS */ } ``` Para este exemplo, usamos a virgular para definir uma das condições aplicadas e como exemplo atribuímos o `orientation`. ### Operador lógico not no media queries: Usamos este operador lógico para negar uma característica na query, porém, ele não pode ser usado sozinho, pois necessita de algo a ser negado para cair na condição aplicada. ```css @media not all and (monochrome) {...} ``` Neste exemplo, ele está negando tudo que vem após o `not`, então apenas entrará naquela condição o que diferir da condição. Porém, em casos em que há uso de vírgula, a expressão se encerrará ao inserir o novo conteúdo depois da vírgula. ## Conclusão Neste artigo aprendemos sobre medias types, media queries e seus operadores lógicos. Além dos exemplos citados, existem outros métodos de media mais avançados, por isso recomendo fortemente a leitura da [documentação disponibilizada pela Mozilla](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries). - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #media types ](https://www.treinaweb.com.br/blog/tag/media-types) - [ #media queries ](https://www.treinaweb.com.br/blog/tag/media-queries) 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/2022/08/seletores_avancados_do_css-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Seletores avançados do CSS ](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. Ler artigo - ![](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/2019/11/12071147/intro-svg-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1) Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-2-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Media Query. Colocando em prática seu uso. ](https://www.treinaweb.com.br/blog/media-query-colocando-em-pratica-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. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/02/06152104/flex-grid-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ FlexBox ou CSS Grid? ](https://www.treinaweb.com.br/blog/flexbox-ou-css-grid) Houve um tempo em que posicionar elementos pelo CSS poderia ser trabalhoso, dependendo do que fosse preciso criar. Temos duas especificações que resolvem esses problemas: FlexBox e CSS Grid. Você sabe quando usar uma ou outra? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. 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/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/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/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/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 ## 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 07min 38s** - 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