Setting the site to any screen

Navigation
1

Good people, I'm trying to learn better about resizing the website applied to any screen. I have read some tutorials on the internet and by the way I could not do everything right, because here in my test I apply @medias only when entering the site in question by a small screen device the site does not resize, it opens with the settings of a larger screen than his actually.

The code I'm using is this 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>

As you can see I created only a single div called a box, this div is just for testing, and if everything went well this div would change color according to browser size. When I test this in a normal browser if I decrease the browse the div changes its color according to size, but on the mobile it does not obey this rule. What's wrong? or what is missing?

    
asked by anonymous 06.06.2014 / 02:21

1 answer

1

This is because you are not indicating that you should check the minimum size, to check the size of the screen the correct code is this: 

@media only screen and (...)
    
06.06.2014 / 02:51
Vector mean, prime number indices Javascript: Master tab