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?