Diseño fluido
Un diseño fluido es un tipo de diseño de página web en el que el diseño de la página cambia de tamaño cuando cambia el tamaño de la ventana. Esto se logra definiendo las áreas de la página mediante porcentajes en lugar de anchos fijos de píxeles.
La mayoría de los diseños de páginas web incluyen una, dos o tres columnas. En los primeros días del 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 de 960px de ancho con tres columnas de 180px, 600px y 180px de ancho. Aunque este diseño podría verse muy bien en una pantalla de 1024x768, podría verse pequeño en una pantalla de 1920x1080 y no cabría en una pantalla de 800x600.
Los diseños fluidos resuelven este problema mediante el uso de 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 ocupe el 80% de la pantalla, mientras que las tres columnas podrían ocupar el 18%, el 64% y el 18%, respectivamente. Al usar porcentajes, el contenido puede expandirse o reducirse para ajustarse a la ventana de la computadora del usuario. A continuación se muestra el CSS utilizado para crear un diseño fijo frente a un diseño fluido.
| Diseño fijo | Diseño fluido |
|---|---|
|
.content { width: 960px; } .left, .right { width: 180px; } .middle { width: 600px; } |
.content { width: 80%; } .left, .right { width: 18%; } .middle { width: 64%; } |
Cada una de las clases CSS de los ejemplos podría asignarse a un div dentro del HTML de una página, donde las clases .left, .right y .middle estarían incluidas dentro de la clase .content. La clase de contenido también podría asignarse a una tabla y las otras clases podrían asignarse a celdas de la tabla. La clase .content de ancho fijo no requiere un ancho definido, ya que se extiende automáticamente por el ancho de los divs o las celdas de tabla incluidos.
Diseño fluido frente a diseño adaptable
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 mediante un diseño web adaptable 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 adaptable 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.
Pon a prueba tu conocimiento