Ancho y Alto

En muchas ocasiones es necesario poder definir el alto y el ancho de los elementos en diferentes tamaños de pantalla, lo cual significa que para un determinado elemento podemos necesitar que tenga un alto y ancho específico que cambiará en función al tamaño del dispositivo en el que se esté mostrando. Desde CSS se puede realizar esto con las @media que permiten definir estilos personalizados en función al tamaño del dispositivo. Bodystyle dispone de una serie de clases parametrizadas para lograr resultados semejantes sin necesidad de introducir código CSS.

Ancho y Alto Generales

Se comienza esta sección definiendo un ancho y alto general, lo cual implica ocupará el mismo porcentaje en todos los dispositivos, la medida utilizada para configurar el ancho y el alto es el (%) que va a depender del contenedor padre, por ejemplo: Cuando decimos que un elemento va a ocupar el 40% de ancho es el 40% del contenedor padre, lo mismo con el alto.

Alto de 300px

Esto es un contenedor de 100% de alto y 50% de ancho 
    

        

            Esto es un contenedor de 100% de alto y 50% de ancho
Notaremos que si achicamos el tamaño de la pantalla la proporción seguirá igual, el contenedor padre disminuirá su ancho y el contenedor hijo (el negro) seguirá ocupando un 50% del total deformando el contenido. Esto se debe a que el 50% en equipos de pantalla grande no es lo mismo que el 50% en equipos chicos.
Las clases utilizadas en el ejemplo son:
  • alto-100 (alto del 100%)
  • ancho-50 (ancho del 50%)

    • Alto y Ancho Rrsponsive

    Ahora vamos a realizar el mismo ejemplo pero añadiendo las clases pertinentes para que el contenido del contenedor hijo no se deforme.

    Esto es un contenedor de 100% de alto y 50% de ancho 
        
    
        
    
            Esto es un contenedor de 100% de alto y 50% de ancho

    Notese que si achican la pantalla el porcentaje del ancho del contenedor hijo cada vez va a ser mayor, de esta forma logramos adaptar el diseño para que se muestre de manera correcta.

    Ahora hacemos lo mismo con el alto.

    Esto es un contenedor de 50% de alto y 50% de ancho 
        
    
        
    
            Esto es un contenedor de 50% de alto y 50% de ancho

    Resumen de Clases

    Clase Alias Medida Descripción
    alto-[%] height-[%] Todos los dispositivos Porcentaje del alto que va a tener el contenedor hijo respecto a su padre.
    ancho-[%] width-[%] Todos los dispositivos Porcentaje del ancho que va a tener el contenedor hijo respecto a su padre.
    ancho-m-[%] width-m-[%] 770px < X <= 1030px Porcentaje del ancho que va a tener el contenedor hijo respecto a su padre en dispositivos medios.
    ancho-s-[%] width-s-[%] 400px < X <= 770px Porcentaje del ancho que va a tener el contenedor hijo respecto a su padre en dispositivos chicos.
    ancho-xs-[%] width-xs-[%] 400px > X Porcentaje del ancho que va a tener el contenedor hijo respecto a su padre en dispositivos extra chicos.
    alto-m-[%] height-m-[%] 770px < X <= 1030px Porcentaje del alto que va a tener el contenedor hijo respecto a su padre en dispositivos medios.
    alto-s-[%] height-s-[%] 400px < X <= 770px Porcentaje del alto que va a tener el contenedor hijo respecto a su padre en dispositivos chicos.
    alto-xs-[%] height-xs-[%] 400px > X Porcentaje del alto que va a tener el contenedor hijo respecto a su padre en dispositivos extra chicos.
    Cualquier duda consulta la sección Medidas en la cual se describe numericamente los tamaños manejados por la biblioteca.
    `r`n