Diseño web responsive
Si te gusta la programación pero no comprendes en qué consiste el diseño responsive, aquí te lo vamos a explicar.
Ha leído foros de programadores o programadoras buscando la solución a un problema. Como hacer que dos elementos que están uno al lado del otro en un sobremesa, queden uno encima del otro en el móvil.
Imagen 1. Versión sobremesa
Imagen 2. Móvil
En un primer acercamiento podríamos pensar que para que los elementos estén perfectamente alineados en la versión sobremesa, lo ideal sería hacer una tabla que contenga los dos elementos.
Imagen 3.
En código sería algo así
Con tablas
<table>
<tr><td>Elemento 1</td>
<tr><td>Elemento 2</td>
</table>
Con div
<div class="tabla">
<div class="tr">
<div class="td">Elemento 1</div>
<div class="td">Elemento 2</div>
</div>
</div>
Añadiendo una hoja de estilo con lo siguiente.
<style>
.tabla{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
</style>
Además, podríamos querer asignarle un tamaño fijo, para conseguir colocar los elementos.
Pues bien, este son precisamente los errores que no debemos cometer. Si introducimos los elementos en una tabla, o un div con formato de tabla, quedarán muy bien colocados, pero al pasarlo a móvil, veremos la siguiente imagen
Imagen 4. Vista en el móvil
Para conseguir el efecto deseado, lo que tenemos que hacer es meter los elementos en un contenedor exterior con al propiedad flex-wrap:wrap;
Además, este elemento superior tendrá los atributos
justify-content: center;
align-items: center;
De esta manera el navegador centrará los elementos tanto en vertical como en horizontal.
No intentes poner atributos valign ni text-align porque no funcionan.
El atributo flex-wrap nos da la propiedad de reubicar elementos en la fila inferior si no caben en la superior.
Imagen 5. Elementos en una ventana con scroll horizontal. Sin fex-wrap
Imagen 6. Elementos en una ventana con scroll vertical. Con flex-wrap
@media screen and (max-width: 1024px) {
}
/* formato en pantalla pequeña*/
@media screen and (max-width: 2048px) {
}
Puedes ver una versión online del código aquí.
/* formato en pantalla grande*/
De esta manera, tenemos una tabla, que en el formato de pantalla grande, tiene un tamaño, y en formato pantalla pequeña, otro tamaño.
En general utilizaremos tamaños variables, en lugar de tamaños fijos. De esta manera, la tabla que definamos tendrá:
Contenedores superiores
Estos contenedores crean un espacio en el que poder colocar los elementos que queremos mostrar.
.todo_pantalla {
flex-wrap:wrap;
display:flex;
justify-content: center;
align-items: top;
}
.marco {
width:100%;
height:100%;
flex-wrap: wrap;
display:flex;
justify-content: center;
align-items: top;
}
.interior {
width:100%;
flex-wrap: wrap;
display:flex;
justify-content: center;
align-items: center;
background-color:#ffffff;
}
.marco_central {
background-color:#ffffff;
width:100%;
height:100%;
flex-wrap: wrap;
display:flex;
justify-content: center;
}
De esta manera
En su interior colocamos las tablas siguientes.
.tabla_responsive1 {
margin-top:1%;
margin-left:1%;
margin-bottom:1%;
margin-right:1%;
width: 46%;
height:96%;
background-color:#aaaaaa;
border:0;
border-radius:20px;
}
.tabla_responsive2 {
margin-top:1%;
margin-left:1%;
margin-bottom:1%;
margin-right:1%;
width: 46%;
height:96%;
border-radius:20px;
background-color:#aaaaaa;
}
Con un fichero navegable con este contenido
<html>
<body>
<link rel="stylesheet" href="estilo.css">
<div class="todo pantalla">
<div class="marco">
<div class="interior">
<div class="marco_central">
<table class="tabla_responsive1">
<tr><td> </td>
</table>
<table class="tabla_responsive2">
<tr><td> </td>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Las tablas como ves están libres para moverse por la pantalla conforme el navegador le indique. Tienen un margen por los cuatro costados que hemos colocado aquí para que veas bien la maquetación.
Todo ello en el maquetado de pantalla grande. Queda como sigue:
Imagen 6. Maquetado pantalla grande
En la pantalla pequeña, las tablas ocupan el 100% de la pantalla y los marcos centrales, en lugar de alinear al centro, alinean arriba.
@media screen and (max-width: 1024px) {
.todo_pantalla {
flex-wrap:wrap;
display:flex;
justify-content: center;
align-items: top;
}
.marco {
width:100%;
height:100%;
flex-wrap: wrap;
display:flex;
justify-content: center;
align-items: top;
}
.interior {
width:100%;
flex-wrap: wrap;
display:flex;
justify-content: center;
align-items: center;
background-color:#ffffff;
}
.marco_central {
background-color:#ffffff;
width:100%;
height:100%;
flex-wrap: wrap;
display:flex;
justify-content: center;
}
.tabla_responsive1 {
margin-top:1%;
margin-bottom:1%;
margin-left:1%
margin-right:1%;
width: 100%;
border-radius:20px;
background-color:#888888;
}
.tabla_responsive2 {
margin-top:1%;
margin-bottom:1%;
margin-left:1%;
margin-right:1%;
width: 100%;
border-radius:20px;
background-color:#888888;
}
}
Quedando una versión como sigue:
Imagen 7. Maquetado móvil y tablet
Puedes descargarte los ficheros fuente aquí.
Comentarios
Publicar un comentario