Páginas web con un diseño fluido o de ancho líquido Use todo el ancho del navegador. Esto se debe a que una o más columnas deben cambiarse automáticamente para que se ajuste al tamaño de la ventana del navegador. Entonces, el diseño de fluido es más amigable porque se adapta al tamaño de la pantalla del espectador. Más específicamente, para hacer un diseño de ancho de fluido, el ancho del elemento debe especificarse en "porcentaje".

Este blog lo guiará sobre la creación de un diseño de ancho fijo con CSS.

Cómo crear un diseño de ancho de fluido usando CSS?

En HTML, primero, agregue un elemento Div con un nombre de clase "ancho de fluido". Luego añade

y

elementos para agregar algo de contenido.

Html

Bienvenido a Linuxhint

Linuxhint es el mejor sitio web de tutorial en línea. Si quieres aprender programación bash, estás en el lugar correcto.

Agregar el código anterior al archivo HTML mostrará la siguiente salida:

La estructura de la página se ha completado. Ahora, en la siguiente sección, los elementos HTML se diseñarán utilizando varias propiedades CSS.

Estilo todos los elementos

*
margen: 0px;
relleno: 0px;

Todos los elementos HTML que se especifican en el archivo tendrán un margen 0px y acolchado 0px.

Estilo de ancho de fluido Div

.ancho fluido
Color de fondo: RGB (238, 238, 238);
Ancho: 90%;
margen: auto;
Altura: 100 VH;

La siguiente es la descripción de las propiedades que se aplican al ancho de fluido Div:

• ".ancho de fluido"Se utiliza para acceder al ancho de fluido de la clase. Aquí el " . El signo se conoce como selector de clases.
• "color de fondo"La propiedad determina el color de fondo del elemento.
• "ancho"La propiedad especifica el ancho del elemento.
• "margen"La propiedad agrega espacio alrededor de los elementos.
• "altura"La propiedad establece la altura del elemento.

Al proporcionar el código mencionado anteriormente, la salida aparecerá de la siguiente manera:

Se puede ver que el tamaño del Div de ancho de fluido se ajusta de acuerdo con el tamaño de la pantalla. Significa que los elementos que se especifican en porcentajes establecerán su ancho de acuerdo con la resolución de la pantalla.

Así es como podemos crear un diseño de ancho de fluido en CSS.

Conclusión

Los desarrolladores deben tener mucho cuidado al diseñar cualquier aplicación. Deben tener en cuenta cómo quieren que aparezca su aplicación en diferentes dispositivos. Una de esas cosas es establecer el diseño de la página web. Además, para hacer un diseño fácil de usar y receptivo, el "porcentajeSe debe usar la unidad. Este blog ha explicado con éxito cómo crear un diseño de ancho de fluido en CSS con un ejemplo.