HTML ADAPTATIVO PARA IMAGEN Y MENÚ
Para que una página html5 sea adaptativa debemos al menos:
- insertar una etiqueta <meta> viewport con dos condiciones: "width=device-width, initial-scale=1.0".
- Agregar en estilos un item "@media screen AND (max-width:600px ) {}". Aquí volvemos a definir cada estilo pero tal como se va a ver en los dispositivos de menor ancho. max-width indica el ancho en el cual se empezarán a aplicar los estilos @. En el ejemplo al achicar la pantalla, aumentamos el ancho de menu de 30% a 100% y de float:left a float:none, así al llegar a 600px de ancho, los menúes se apilan y el ancho de la tira se adapta a esa nueva altura. Como background-color no se redefine queda igual.
- Para que la imagen se vaya achicando ocupando el ancho máximo disponible debe ser width:100% pero se debe agregar max-width: ancho real de la imagen para que no deforme o pixele. Si no queremos que se reduzca a menos de un valor irá min-width: valor deseado.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0";>
<style>
.menu{
float:left;
width:30%;
background-color:#dedede;
}
@media screen AND (max-width:600px ) {
.menu{
float:none;
width:100%;
}
}
</style>
</head>
<body>
<img style=" width:100%; max-width:598px;" src="img/adaptativo.jpg"/>
</body>