1
Good guys, I’m trying to learn better about the resizing of the site applied to any screen. I’ve read some tutorials on the internet and I can’t do everything right, because here in my test I apply the @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 of his actually.
The code I’m using is that there
<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 only for testing, and if everything went well this div would change color depending on the size of the browser. When I test this in a normal browser if I decrease the Rowse the div changes its color according to the size, but in the cell phone it does not obey this rule. What’s wrong? Or what’s missing?
I suggest a read on the link below because it has very cool material related to what you need to do (more than a lot of media querie tutorial, here is conceptual content and other tips going beyond merely css and js). Suggested link: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/#B1
– Marcelo Bezerra bovino