Este é o oitavo post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Neste artigo vamos te ensinar o que são media queries CSS, e como usar para criar sites responsivos.
No entanto, para seguir esse tutorial sem dificuldades é necessário ter noção sobre as tecnologias HTML e CSS. Então recomendamos que siga o guia “O que é HTML” e “O que é CSS” depois volte aqui. Pois assim ira absorver melhor todo esse conteúdo.
Conteúdo
Introdução a media queries CSS
Media queries são uma técnica CSS que permite aplicar estilos separadamente em diferentes dispositivos ou resoluções de tela. Isso é fundamental para tornar o site responsivo.
Ou seja, adaptável a diferentes tamanhos de tela. Estas são maneiras fáceis e eficientes de tornar seu site responsivo e fornecer uma boa experiência aos usuários em diferentes dispositivos.
Primeiramente, para usar media queries, você especifica uma regra CSS entre parênteses e adiciona um teste de condição, como a largura mínima da tela. Desta forma, depois pode aplicar estilos diferentes quando a largura da tela atender a essa condição.
Siga o exemplo básico abaixo da sintaxe:
@media (condição) {
/* Regras CSS */
}
Diferença entre media types e media features
Agora que já sabe o início iremos mais fundo em sua estrutura. Pois abordaremos sobre Media types e media features, que são dois componentes importantes das media queries CSS.
Em suma, media types definem o tipo de mídia para o qual as regras CSS se aplicam e media features são usadas para especificar as condições sob as quais as regras CSS serão aplicadas. Não se preocupe se não tiver compreendido, pois, iremos discutir mais sobre cada uma, a seguir:
Media types
Media types são os tipos de dispositivos aos quais as regras CSS se aplicam. Como, por exemplo:
- screen – para dispositivos de tela como celulares, tablets, monitores, PCs entre outros;
- print – para impressão;
- handheld – para dispositivos móveis, ou seja, smartphones;
- all – para todos os tipos de dispositivos. (Se o valor não for especificado, esse será o valor padrão).
Ao especificar o media type, você pode controlar se as regras CSS que devem ser aplicadas em diferentes dispositivos.
Media features
Media features são características específicas das mídias, como tamanho de tela, resolução, orientação, etc. Elas são usadas para testar a condição para a qual as regras CSS serão aplicadas.
Por exemplo, você pode especificar uma largura mínima da tela (com a condição min-width:600px) como condição para a aplicação de estilos específicos. Veja a liste de algumas media features:
- width
- height
- orientation
- pixel-density
- aspect-ratio
/*media type*/
@media all {
/* Regras CSS */
}
/*media features*/
@media (min-width:600px) {
/* Regras CSS */
}
O que são Media Queries?
Media Queries CSS permite aplicar estilos distintos em diferentes dispositivos ou resoluções de tela. Isso é feito testando condições, ou seja, as media types e media features. Então é aplicando os estilos específicos quando essas condições são atendidas.
Agora que sabe o que são media types e features deve ter ficado bem claro! Então, podemos passar para o proximo tópico e explicar como aplicar mais de uma condição, para serem testados simultaneamente.
Operadores lógicos do media queries CSS
Por exemplo, os operadores lógicos podem permitir criar regras CSS mais complexas e precisas, tornando mais fácil aplicar os estilos distintos em diferentes dispositivos e resoluções de tela.
Em resumo, os operadores lógicos do media query são usados para combinar vários testes de condições em uma única regra. Eles incluem:
Operador lógico and
E (and): Esta regra será aplicada se todas as condições forem atendidas. Por exemplo, se você quiser aplicar uma regra CSS somente em dispositivos com largura mínima de 320 pixels e orientação paisagem, você usaria o operador “and” da seguinte maneira:
@media (min-width: 320px) and (orientation: landscape) {
/* Regras CSS */
}
Operador lógico or
Ou (or): A regra será aplicada se pelo menos uma das condições for atendida. Por exemplo, se você quiser aplicar uma regra CSS em dispositivos com largura mínima de 320 pixels ou largura mínima de 480 pixels, você usaria o operador “or” da seguinte maneira:
@media (min-width: 320px), (min-width: 480px) {
/* regras CSS */
}
Operador lógico not
Não (not): Neste caso a regra será aplicada se a condição não for atendida. Por exemplo, se você quiser aplicar uma regra CSS em dispositivos com largura mínima de 320 pixels, exceto em dispositivos com orientação retrato, você usaria o operador “not” da seguinte maneira:
@media (min-width: 320px) and (not orientation: portrait) {
/* regras CSS */
}
Operador lógico only
Apenas (only): O operador only indica que as regras só serão aplicadas se o dispositivo tiver suporte completo à media query em questão. Por exemplo, se você usar a media query “print”, as regras serão aplicadas apenas em impressoras que suportem essa media query.
Usar o operador “only” é opcional, mas pode evitar problemas de compatibilidade com navegadores antigos que não oferecem suporte completo às media queries.
A sintaxe é a seguinte:
@media only print {
/* regras CSS */
}
Conclusão sobre media queries CSS
Neste artigo aprendemos que media queries são uma técnica fundamental para criar sites responsivos que se adaptam a diferentes tamanhos de tela e dispositivos. Eles permitem que você teste condições, como largura da tela, orientação, resolução, entre outras, e aplique estilos específicos quando essas condições são atendidas.
Além disso, também aprendemos que podemos usar operadores lógicos como “and”, “or”, “not” e “only” para criar regras CSS mais precisas e complexas. O operador “only” garante que as regras sejam aplicadas apenas em dispositivos que ofereçam suporte completo à media query.
Em suma, as media queries são uma ferramenta poderosa para criar designs responsivos e proporcionar uma experiência otimizada aos usuários.
Media queries exemplos de código
Siga agora um exemplo prático de media querie, para quando estiver na versão mobile o texto que está ao lado da imagem vá para baixo. Para esse exemplo em questão utilizamos o media feature na seguinte regra (max-width: 768px):
<!-- seção com texto e imagem lado a lado -->
<section class="secao3" id="empresa">
<div class="secao3-div">
<div class="secao3-div-1">
<div class="secao3-div-1-coluna">
<!-- elemento h2 e p -->
<b>Media Queries</b>
<p>Para deixar uma página HTML responsiva, você precisa usar media queries em seu arquivo CSS.
</div>
</div>
<div class="secao3-div-2">
<div class="secao3-div-2-coluna">
<!-- elemento imagem -->
<img decoding="async" src="https://blog.marcusoliveiradev.com.br/wp-content/uploads/2023/01/Sua-primeira-pagina-em-HTML-e-CSS.png" alt="criando página em HTML e CSS respunsiva com media queries" width="100%">
</div>
</div>
</div>
</section>
/*seção-3 style*/
.secao3{
height: auto;
width: 100%;
background-color: rgb(245, 245, 245);
}
.secao3-div{
display: flex;
flex-wrap: wrap;
width: 85%;
margin: auto;
align-items: center;
padding: 60px 10px 60px 10px;
}
.secao3-div-1, .secao3-div-2{
display: flex;
width: calc(50% - 20px);
padding: 10px;
}
/*mobile*/
@media (max-width: 768px) {
.secao3-div-1, .secao3-div-2{
width: 100%;
padding: 0px;
}
}
Para deixar uma página HTML responsiva, você precisa usar media queries em seu arquivo CSS.
Você pode adquirir mais experiência com mais exemplo de uso de media queries, deixaremos a seguir dois posts para poder praticar mais:
Dúvidas frequentes
Para deixar uma página HTML responsiva, você precisa usar media queries em seu arquivo CSS. As media queries permitem aplicar estilos diferentes em função de condições relacionadas ao dispositivo, como largura da tela, orientação, resolução, etc. Assim, o site se adapta a diferentes tamanhos de tela e dispositivos.
A media querie é uma técnica CSS que permite aplicar estilos diferentes em função de condições relacionadas ao dispositivo, como largura da tela, orientação, resolução, etc. Ela é usada para criar sites responsivos, se adaptando a diferentes tamanhos de tela e dispositivos, melhorando a experiência do usuário. Com media queries, estilos específicos são aplicados ao documento HTML quando as condições são atendidas, garantindo a otimização do site para vários dispositivos.
Para deixar um site responsivo com media queries, você deve definir regras CSS que sejam aplicadas em função de condições relacionadas ao dispositivo. Para fazer isso, você pode usar media queries no arquivo CSS e testar diferentes condições. Assim, você garante que o site se adapte a diferentes tamanhos de tela e dispositivos, oferecendo uma melhor experiência aos usuários.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
