1
resposta

Deixando o site responsivo: @midia e viewport

Dúvida: 1) Quando usar o media query?2) Esta linha de comando substitui o media query ? 3) Para deixar o site responsivo sempre devo usar a linha de comando acima? Eu estou entendendo que para qualquer tamanho de tela basta utilizar a linha de comando acima.

1 resposta

Fala Josimar, tudo bem? Espero que sim,

Vamos lá, As Media queries definem condições para utilização de estilos CSS. Se o dispositivo de acesso do usuário se adequar as condições se aplicam os estilos, ou seja, você utilizará as Media queries quando você quiser aplicar um estilo especifico para tais condições, como: tamanho de tela, tipo de tela, orientação de tela e etc...

Sintaxe Media queries:

@media condição {
    Qual estilo será aplicado
}

Exemplo:

@media (max-width: 600px) {
  h1 {
    font-size: 21px;
   }
}

Nesse exemplo eu estou dizendo que o h1 em dispositivos com largura maxima (max-width) de 600px terá um tamanho de 16px. Veja mais nessa documentação das media queries:

https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software