Diseño fluido
Un diseño fluido es un tipo de página web diseño en el que el diseño de la página cambia de tamaño como ventana Se cambia el tamaño. Esto se logra definiendo áreas de la página usando porcentajes en lugar de fijos píxel anchos
La mayoría de los diseños de páginas web incluyen una, dos o tres columnas. En los primeros días de diseño web, cuando la mayoría de los usuarios tenían tamaños de pantalla similares, los desarrolladores web asignaban anchos fijos a las columnas. Por ejemplo, un diseño fijo puede incluir un área de contenido principal que es 960px de ancho con tres columnas que tienen anchuras de 180px, 600px y 180px. Si bien este diseño puede verse bien en una pantalla 1024x768, puede verse pequeño en una pantalla 1920x1080 y no cabe en una pantalla 800x600.
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 80% de la pantalla y las tres columnas podrían ocupar 18%, 64% y 18% respectivamente. Mediante el uso de porcentajes, el contenido puede expandirse o reducirse para adaptarse a la ventana de la computadora del usuario. los CO utilizado para crear un diseño fijo frente a un diseño fluido se muestra a continuación.
| Diseño fijo | Diseño fluido |
|---|---|
|
.content {ancho: 960px; } .left, .right {ancho: 180px; } .middle {ancho: 600px; } |
.content {ancho: 80%; } .left, .right {ancho: 18%; } .middle {ancho: 64%; } |
Las clases CSS en los ejemplos podrían asignarse a un div dentro de una página HTML donde el .izquierda, .derecho y .medio las clases están encerradas dentro del .contenido clase. La clase de contenido también podría asignarse a una tabla y las otras clases podrían asignarse a las celdas de la tabla. El ancho fijo .contenido La clase no requiere un ancho definido, ya que abarca automáticamente el ancho de los divs o celdas de tabla incluidos.
Diseño fluido vs diseño receptivo
Los términos "diseño fluido" y "diseño web adaptable"a veces se usan indistintamente, pero son dos cosas diferentes. Una página creada con un diseño web receptivo 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. Diseño web receptivo 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.