Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Como hacer Divs responsive en Oxygen

¿Cómo puedes hacerlo?

En el siguiente tutorial vamos a ver de forma rápida y sencilla cómo hacer que los divs sean responsive en un sitio web construido con Oxygen Builder . Lo que esto significa es que la relación de aspecto sigue siendo la misma(el ancho y el alto cambian según el tamaño de la pantalla).

Conocer esto es muy útil si estás utilizando divs con imágenes de fondo que tienen una relación de aspecto, deseas limitar su CLS o simplemente necesita elementos de relación de aspecto fijos(divs responsive) en tú sitio web de Oxygen .

Lo mejor de este método es que usa atributos de datos para especificar la relación de aspecto, puede cambiarlos fácilmente y la función está disponible globalmente después de instalarla en la hoja de estilo CSS.

¿Por qué consideramos qué es importante?

Para lo principal que utilizamos este método es hacer elementos cuadrados respectivos. Sin utilizar este algoritmo es muy difícil, hasta imposible pudiéramos decir, lograr esto sin dejar de responder a los cambios de ancho del contenedor principal y el tamaño de la pantalla.

¿Qué aplicaciones tiene?

Las aplicaciones del mundo real de los divs de Oxygen Builder que tienen relaciones de aspecto pero que siguen respondiendo al tamaño real de la pantalla podrían incluir:

  • envolver imágenes, videos e iFrames de carga lenta que responden con relaciones de aspecto estándar en este estilo de contenedor de divs, eliminando el cambio de diseño acumulativo .
  • envolver la fotografía con un div que tiene un correspondiente.
  • relación de aspecto (muchas fotos tomadas con DSLR tienen una relación de 4: 3).
  • rellenando divs dinámicamente con imágenes de fondo para elementos repetidores de blogs, mientras se mantienen en una proporción cuadrada estándar.

Al tener relaciones de aspecto estándar para sus páginas de archivo, donde hay muchas tarjetas individuales que contienen imágenes y texto destacados, obtiene una apariencia muy uniforme, pareja y limpia en cualquier ancho de pantalla y dispositivo.

El método del cuál estamos hablado utiliza  un atributo de datos simple y permite aplicar de forma rápida y sencilla relaciones de aspecto estándar en Oxygen Builder.

Pasemos a ver el código, a discutir cómo funciona y cómo agregarlo a Oxygen.

[style*="--aspect-ratio"] > :first-child {
width: 100%;
}
[style*="--aspect-ratio"] > img {
height: auto;
}
@supports (--custom:property) {
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
Click para Copiar
Copiado
Si quieres profundizar mas en este código:
https://css-tricks.com/aspect-ratio-boxes/

¿Cómo instalar y usar en Oxygen?

Este es un código CSS estándar, así que se copia y se pega desde este sitio web directamente en una hoja de estilo en Oxygen.

1- Nos dirigimos a Manage.
2- Click en Stylesheets.
Div 1

3- Se añade una hoja de estilo, en este caso se le ha puesto de nombre Demo.
4- Se pega el código en el editor CSS.

Div 2

Ahora crearemos un  div y  le daremos un ancho del 100%.
Y recuerda, esto se trata de hacerlo responsive, por lo que nunca trabajaremos con pixels, siempre con porcentaje

Ahora, como  paso final hay que aplicar un atributo de datos.
5 - Vamos a la pestaña Advanced
6 -Click en atributos. 

Div 3

Vamos a indicar los atributos.

 Name= “style”
Data= “--aspect-ratio:1/1;”
Click en el botón de Apply Atributes (Abajo a la izquierda)

Div 4

El div ahora tendrá una relación de aspecto que no cambiará cuando lo hace el tamaño de la pantalla.

Puedes poner la relación de aspecto que desees.
El ejemplo anterior le da una respuesta cuadrada en el generador de oxígeno. 

Como ejemplos:

Data= “--aspect-ratio:1.5;” - Igual a 3:2
Data= “--aspect-ratio:3523/2811;” - relación directa con pixels

Y esto es todo en este tip.
Nos vemos en el próximo artículo.

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

0 0 votos
Article Rating
Suscribir
Notificar de
guest
0 Comments
Comentarios en línea
Ver todos los comentarios

OTROS TIPS

Burbuja que sigue al cursor

Un efecto de seguimiento del cursor con solo código.

Leer más
Botón para copiar

Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.

Leer más
Año Copyright dinámico

Hacer que el año del copyright, generalmente colocado en el footer, se actualize de manera automática. Mostramos tres maneras de hacerlo.

Leer más
LISTADO TIPS