-1

Boa noite!

Estou desenvolvendo a responsividade de uma pagina web.... porém por algum motivo que espero que me falem, apenas a primeira declaração @media esta indo corretamente no browser. Tentei verificar a sintaxe um milhão de vezes...porém estão literalmente iguais nesse quesito.. estou deixando passar algo?

ps: a declaração que esta indo corretamente esta destacada na imagem

ps2: notei algo estranho: quando a width do navegador fica abaixo de 1024px todas as declarações são atualizadas com sucesso, porém quanto o navegador fica abaixo de 769px como indicado na imagem as declarações não são atualizadas no navegador.

inserir a descrição da imagem aqui

UPDATE: acabei descobrindo que não era isso...deu certo mas nao sei o motivo de ter dado certo kkk

Após eu colocar a seguinte linha de código no html ele funcionou:

<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="true" />

Só queria saber o motivo de ter funcionado...

0

2 Respostas 2

0

Opa, bom dia cara, acredito que seu erro está porquê você não passou a prop screen para telas, você deve fazer assim:

@media (min-width: 769px) and (max-width: 1024px) {
    .color {
      color: red;
    }
  } 

@media screen and (max-width: 768px) {
    .color {
      color: green;
    }
  }


@media screen and (max-width: 320px) {
    .color {
      color: yellow;
    }
  }

Qualquer dúvida, só mandar. Abraços!

2
  • Ola mauricio, tive novas duvidas, estao abaixo, desde ja agradeço a primeira resposta!! tmj 15/12/2020 às 17:07
  • @JonatãndaFonsecaBossan Então, de modo mais simples a tag serve pra deixar sua página mais acessível à diferentes tamanhos, você pode ler mais sobre aqui. 16/12/2020 às 3:08
0

acabei descobrindo que não era isso...deu certo mas nao sei o motivo de ter dado certo kkk

Após eu colocar a seguinte linha de código no html ele funcionou:

<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="true" />

Só queria saber o motivo de ter funcionado...

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .