Diseños Fluidos

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 63 de 76.

En el diseño web adaptable, un diseño fluido se ajusta a diferentes tamaños de pantalla utilizando cuadrículas flexibles y unidades relativas como porcentajes en lugar de valores de píxeles fijos. Esto ayuda a que el diseño se expanda o se contraiga para adaptarse a cualquier pantalla, garantizando una experiencia de usuario fluida en todos los dispositivos.

Los principios clave de los diseños fluidos incluyen:

Unidades relativas: Uso de porcentajes (%), unidades de viewport (vw, vh), o ems (em) en lugar de píxeles fijos (px) para anchos, alturas, márgenes y padding.

Cuadrículas flexibles: Uso de CSS Grid o Flexbox para crear diseños basados en cuadrículas que puedan adaptarse a diferentes tamaños de pantalla.

Max-width y min-width: Establecer anchos máximos y mínimos para los elementos para evitar que se vuelvan demasiado anchos o demasiado estrechos en tamaños de pantalla extremos.

Aquí tienes un ejemplo de un diseño fluido básico utilizando porcentajes:

.container {
    width: 90%; /* El contenedor ocupa el 90% del ancho de la ventana gráfica */
    max-width: 1200px; /* El contenedor no superará los 1200px */
}
.sidebar {
    width: 30%; /* La barra lateral ocupa el 30% del ancho del contenedor */
    float: left;
}
.main-content {
    width: 70%; /* El área de contenido principal ocupa el 70% del ancho del contenedor */
    float: left;
}

En este ejemplo, el elemento .container tiene un ancho fluido del 90%, lo que significa que siempre ocupará el 90% del ancho de la ventana gráfica. La propiedad max-width está establecida en 1200px para evitar que el contenedor se vuelva demasiado ancho en pantallas grandes.

Los elementos .sidebar y .main-content tienen anchos fluidos de 30% y 70%, respectivamente, lo que les permite adaptarse al ancho del contenedor.

Desafío

Fácil

Se te proporciona un documento HTML con una división padre (<div>) que contiene dos divisiones hijas (<div>) con las clases sidebar y main. Tu tarea es crear un diseño fluido utilizando porcentajes. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase container. Establece su propiedad width en 80% y margin en 0 auto. Añade un border de 1px solid black para la visualización.
Escribe una regla CSS que apunte al elemento <div> con la clase sidebar. Establece su propiedad width en 25% y haz que flote a la izquierda (float to the left).
Escribe una regla CSS que apunte al elemento <div> con la clase main. Establece su propiedad width en 75% y haz que flote a la derecha (float to the right).

Hoja de referencia

Un diseño fluido se ajusta a diferentes tamaños de pantalla utilizando cuadrículas flexibles y unidades relativas como porcentajes en lugar de valores de píxeles fijos.

Principios clave de los diseños fluidos:

Unidades relativas: Use porcentajes (%), unidades de viewport (vw, vh) o ems (em) en lugar de píxeles fijos
Cuadrículas flexibles: Use CSS Grid o Flexbox para diseños adaptables
Max-width y min-width: Establezca límites para evitar que los elementos se vuelvan demasiado anchos o estrechos

Ejemplo básico de diseño fluido:

.container {
    width: 90%; /* Ocupa el 90% del ancho del viewport */
    max-width: 1200px; /* No excederá los 1200px */
}
.sidebar {
    width: 30%; /* 30% del ancho del contenedor */
    float: left;
}
.main-content {
    width: 70%; /* 70% del ancho del contenedor */
    float: left;
}

Pruébalo tú mismo

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>