Al pensar un poco en lo que son las diferentes resoluciones de pantalla y los diferentes dispositivos que pueden acceder a nuestra página o aplicación web, es necesario mencionar una técnica adicional que sirve un poco cuando estamos haciendo diseños adaptables.
La combinación de estas dos, nos genera un diseño o maquetado en el que los elementos van fluyendo de manera correcta, sin dañar su estilo y posicionamiento, adecuándose al tamaño y resolución de pantalla que esté accediendo al dispositivo. Realizemos un ejemplo para tener más claro el concepto de diseño fluido.
Esta técnica se basa exclusivamente en tener contenedores y elementos con anchos en porcentajes, también se suele utilizar las unidades de medidas relativas al viewport (VH y VW).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Diseño y maquetación Fluida </title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<section id="container">
<div class="cajas1">
</div>
<div class="cajas2">
</div>
</section>
</body>
</html>#container img{
width: 80%;
margin: 0 auto;
border: 2px dotted black;
text-align: center;
}
.cajas1, .cajas2{
display: inline-block;
width: 30%;
margin: 10vh o;
border: 1px solid black;
background: #5810E8;
} Como se observa en la imagen, se tiene un contenedor que siempre ocupará el 80% del total de la pantalla, y las cajas tienen un ancho del 30% y una margen superior/inferior basada en el alto del viewport, por lo tanto puedes disminuir el tamaño del navegador en cualquier forma y siempre tendremos un diseño fluido y adaptable.