1

Bom galera, to tentando aprender melhor sobre o redimensionamento do site aplicado a qualquer tela. Já li alguns tutoriais na internet e pelo jeito não consegui fazer tudo direito, porque aqui no meu teste eu aplico as @medias só que ao entrar no site em questao por um dispositivo de tela pequena o site não redimensiona, ele abre com as configurações de uma tela maior doq a dele de fato.

O codigo que to usando é esse dai

<html>
<title>nada</title>
<head> 
<meta name="viewport" content="width=device-width">

<style>

*{padding:0px; margin:0px}
/* Resluções */
@media (min-width: 240px) {
  .box{width: auto; background:#333; height:100px}
}

@media (min-width: 270px) {
  .box{width: auto; background:#6C0; height:100px}
}

@media (min-width: 480px) {
  .box{width: auto; background:##90F; height:100px}
}

@media (min-width: 768px) {
  .box{width: auto; background:#F00; height:100px}
}

@media (min-width: 1024px) {
  .box{width: auto; background:#C00; height:100px}
}

</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Como podem ver eu criei apenas uma unica div chamada de box, essa div é só pra teste, e se tudo ocorresse bem essa div ia mudar de cor conforme o tamanho do navegador. Quando testo isso em um navegador normal se eu diminuir o browse a div muda sua cor de acordo com o tamanho, porem no celular ele não obedece essa regra. O que está errado? ou o que está faltando?

1

1 Resposta 1

1

Isso deve-se ao fato de você não estar indicando de que se deve checar o tamanho mínimo, para checar o tamanho da tela o código correto é esse:

@media only screen and (...)

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 .