Crear elementos de cambio de tamaño automático con escalable.js
Si lo necesitas Hacer elementos flexibles que llenen automáticamente sus contenedores. Lo recomendaría altamente escalable. Este script JS gratuito de código abierto es perfecto para crear un diseño fluido sin mucho estrés.
Todo lo que se encuentra en la biblioteca de Scale.js es maleable, por lo que puede modificar el estilo, tamaño, posición y contenido interno de cada contenedor. ¿Necesita elementos alineados en la parte superior o inferior de la página? Escalable tiene opciones para eso..
Eche un vistazo al repositorio de GitHub para obtener más información sobre cómo funciona esto..
En su forma más básica, este script toma un elemento de página de destino junto con algunas opciones para personalizar la pantalla. Aquí hay un código de ejemplo tomado directamente de GitHub:
var escalable = nuevo escalable (containerEl, opciones);
Naturalmente, el primer parámetro es el elemento contenedor que está apuntando (idealmente un El parámetro de opciones debe tomar una matriz de pares clave => valor. Estas opciones incluyen valores de altura del contenedor, ancho mínimo y máximo, junto con escalas mínimas y máximas (es decir, cuánto puede escalar con los elementos internos). Eche un vistazo a la página principal del proyecto para obtener una demostración utilizable. Puede arrastrar las esquinas del contenedor para redimensionar automáticamente el elemento flexible que se encuentra dentro. Esto es muy bueno ya que debajo de esa área encontrarás código utilizable tomado directamente de la página. Hay formas de manejar elementos flexibles con solo CSS puro. Sin embargo, estos métodos pueden sentirse anticuados y no ofrecen tanto control como JavaScript. Si desea probar esto, solo tome una copia de GitHub y vea lo que piensa. Escalable aún está en desarrollo activo, pero es un script fácil de editar para sus necesidades.
