Significado de Fluid Layout (Qué es y Definición)
Un diseño fluido es un tipo de diseño de página web en el que la disposición de la página cambia de tamaño a medida que se modifica el tamaño de la ventana. Esto se consigue definiendo áreas de la página mediante porcentajes en lugar de anchos fijos de píxel.
La mayoría de los diseños de páginas web incluyen una, dos o tres columnas. En los primeros tiempos del diseño web, cuando la mayoría de los usuarios tenían tamaños de pantalla similares, los desarrolladores web asignaban a las columnas anchos fijos. Por ejemplo, un diseño fijo puede incluir un área de contenido principal de 960px de ancho con tres columnas que tienen anchos de 180px, 600px y 180px. Mientras que este diseño podría verse muy bien en una pantalla de 1024×768, podría parecer pequeño en una pantalla de 1920×1080 y no cabría en una pantalla de 800×600.
Los diseños fluidos resuelven este problema utilizando porcentajes para definir cada área del diseño. Por ejemplo, en lugar de crear un área de contenido de 960px, un desarrollador web puede crear un diseño que llene el 80% de la pantalla y las tres columnas podrían ocupar el 18%, el 64% y el 18% respectivamente. Mediante el uso de porcentajes, el contenido puede ampliarse o reducirse para adaptarse a la ventana del ordenador del usuario. El CSS utilizado para crear un diseño fijo frente a un diseño fluido se muestra a continuación.
Las clases CSS de los ejemplos podrían asignarse cada una a un div dentro del HTML de una página en la que las clases .left, .right y .middle están encerradas dentro de la clase .content. La clase content también podría ser una asignada a una tabla y las otras clases podrían ser asignadas a celdas de la tabla. La clase .content de anchura fija no requiere una anchura definida, ya que abarca automáticamente la anchura de los divs o las celdas de la tabla incluidos.
Diseño fluido frente a diseño responsivo
Los términos “diseño fluido” y “diseño web responsivo” se utilizan a veces indistintamente, pero son dos cosas diferentes. Una página creada con diseño web responsivo incluye consultas de medios CSS, que cargan diferentes estilos según el ancho de la ventana o el tipo de dispositivo utilizado para acceder a la página. El diseño web responsivo requiere más CSS (y a veces JavaScript) que un diseño fluido básico, pero también proporciona más control sobre el diseño de la página.
La definición de Fluid Layout en esta página es la definición original de SharTec.eu.
El objetivo de SharTec.eu es explicar la terminología informática de una manera fácil de entender. Nos esforzamos por ser simples y precisos en todas las definiciones que publicamos. Si tiene algún comentario sobre la definición de Disposición de los fluidos o desea sugerirnos un nuevo término técnico, póngase en contacto con nosotros.