Cómo convertir un diseño de columna fija a una Liquid

Un sitio web que tiene un diseño de ancho fijo tiene código en el archivo de hoja de estilo en cascada que fija las secciones de diseño del sitio para una cierta anchura en píxeles. Esto significa que el sitio no cambiará de tamaño para adaptarse a la pantalla de su ordenador. Un sitio web con un diseño líquido de ancho tiene código en el archivo CSS que define las secciones del ancho de la disposición del sitio a un porcentaje del tamaño de la pantalla de visualización de la vista. Esto significa que el sitio cambiará de tamaño para adaptarse a la pantalla del visor. Puede cambiar un diseño de ancho fijo a un diseño líquido de ancho mediante la sustitución de las anchuras determinadas en píxeles con anchuras relativas en porcentaje.

Instrucciones

1 Abra el archivo CSS del diseño que desea cambiar a un ancho de líquido en el código HTML preferido o editor de texto plano.

2 Busque la envoltura principal en el código CSS. La envoltura principal controla el ancho de todo el trazado. Por lo general, se encuentra cerca de la parte superior del archivo CSS, y es el nombre del selector generalmente contiene la palabra "contenedor" o "contenedor", junto con una palabra como "principal" o "página" para explicar que es el principal contenedor para el sitio. Al principio del nombre del selector es un hashtag, y siguiendo la envoltura principal es una lista de propiedades, incluyendo "ancho".
Por ejemplo:

main-wrapper {

Ancho: 1000px;

3 Busque la propiedad "ancho" en la lista de las principales propiedades de la envoltura. Tome nota de lo que el ancho fijo de la envoltura principal es en píxeles, luego vuelva a colocar la anchura en píxeles con "100%"
Por ejemplo, podría cambiar esta pieza de código:

main-wrapper {

Ancho: 1000px;

a

main-wrapper {

width: 100%;

4 Localizar cada uno de los contenedores para las barras laterales en el archivo CSS. Por lo general, se encuentran cerca del código de envoltura principal y han "sidebar" como parte del nombre del selector.
Por ejemplo:

-barra lateral izquierda-wrapper {

Anchura: 200px;

5 Convertir la anchura en píxeles al porcentaje proporcional del sitio que desea la barra lateral para cubrir.
Por ejemplo, si el ancho original del sitio era 1000 píxeles, cambie este trozo de código:

-barra lateral izquierda-wrapper {

Anchura: 200px;

a

-barra lateral izquierda-wrapper {

anchura: 20%;

6 Guarde el archivo CSS con las envolturas convertidas en porcentajes.

7 Abra su cliente FTP preferido e iniciar sesión en el servidor Web en vivo. Vaya a la ubicación del antiguo archivo CSS en su sitio web, y cargar el archivo CSS arrastrándolo desde el lado del ordenador local del cliente al servidor en vivo. Dejarla caer sobre la parte superior del archivo CSS de edad. Haga clic en "OK" para confirmar que desea sobrescribir el archivo CSS de edad.

8 Abra su página web en el navegador de Internet para ver que muestre correctamente con su diseño líquido convertido.

Consejos y advertencias

• Haga siempre una copia de seguridad de su sitio web antes de cambiar los archivos en el servidor en vivo en caso de que cometa un error.