Como disponer DIVs adaptables a PC y Moviles. Diseño Responsivo
Sencillo ejemplo de como disponer unos elementos HTML de forma adaptable a navegadores de PC y moviles.
Es muy común hoy en día tener que diseñar nuestra página tanto para navegadores móviles como para pc, por ello en este ejemplo se muestra como hacer de forma muy sencilla que varios elementos se adapten a nuestra pantalla según su ancho.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo Diseño Adaptable</title>
</head>
<style>
@media all and (max-width: 700px){
#General .Elemento{
display: block !important;
width: auto !important;
}
}
#General .Elemento{
display: inline-block;
width: 300px;
border:1px solid #333;
background: #999;
margin:20px;
}
</style>
<body>
<div id="General" style="margin:auto;width:auto;">
<div class="Elemento">Elemento 1</div>
<div class="Elemento">Elemento 2</div>
<div class="Elemento">Elemento 3</div>
<div class="Elemento">Elemento 4</div>
<div class="Elemento">Elemento 5</div>
</div>
</body>
</html>
Como se observa si el ancho de la página es menor a 700px, los DIVs se muestran verticalmente variando su ancho al de la pantalla.
