1

Estou com um problema serio com o Media Query, eu estou testando nesse codigo e não muda o estado de jeito nenhum, reduzo a tela ao maximo e as cores continuam sem mudar; HELP

 .box{
  width: 200px;
  height: 200px;
  background-color: red;
}
.box2{
  width: 250px;
  height: 250px;
  background-color: blue;
}
.box3{
  width: 150px;
  height: 150px;
  background-color: pink;
}
@media screen (min-width:480px){
  .box{
    width: 200px;
    height: 200px;
    background-color: black;
  }
  .box2{
    width: 250px;
    height: 250px;
    background-color: green;
  }
  .box3{
    width: 150px;
    height: 150px;
    background-color: grey;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Teste</title>
  <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <header>
  <div>
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>
</header>
</body>
</html>

2 Respostas 2

2

Troque esta linha @media screen (min-width:480px){ por:

@media screen and (min-width:480px){

EXEMPLO no jsfiddle

Atenção que assim os estilos que estiverem definidos em dentro desse media querie são aplicados quando a janela for maior que 480px. Caso queira que eles aconteçam quando o tamanho da janela for inferior a 480px:

@media screen and (max-width:480px){

EXEMPLO no jsfiddle

2
  • Muitíssimo obrigado, deu super certo. Commented 29/06/2016 às 13:02
  • De nada @FilipeTrader
    – Miguel
    Commented 29/06/2016 às 13:03
1

Você precisa declarar a viewport no head do html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Aí a partir disso, você pode definir as media queries no css normalmente.

E lembrando que é necessário colocar "and" depois de screen, como na resposta acima

@media screen and (min-width:480px)

Mais sobre viewport na w3cSchools

1
  • Muito obrigado meu bom, deu certo. Commented 29/06/2016 às 19:11

Você deve fazer log-in para responder a esta pergunta.

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