Створюйте елементи автоматичної зміни розміру за допомогою Scalable.js

Якщо потрібно роблять гнучкі елементи, які автоматично заповнюють свої контейнери Я дуже рекомендую Scalable. Цей безкоштовний JS скрипт з відкритим вихідним кодом ідеально підходить для створення дизайну рідини без особливого стресу.

Все в бібліотеці Scalable.js є податливим, тому ви можете змінювати стиль, розмір, положення та внутрішній вміст кожного контейнера. Потрібні елементи, вирівняні у верхній або нижній частині сторінки? Масштабується має варіанти для цього.

Загляньте в репо GitHub, щоб дізнатися більше про те, як це працює.

У самому основному вигляді цей сценарій приймає елемент цільової сторінки разом з деякими варіантами налаштування дисплея. Ось приклад коду, взятого безпосередньо з GitHub:

var scalable = new Масштабується (containerEl, варіанти);

Природно, що першим параметром є будь-який контейнерний елемент, на який ви націлюєте (в ідеалі a

або щось подібне).

Параметр options повинен приймати масив пар ключів => значення. Ці варіанти включають значення висоти контейнера, мінімальна та максимальна ширини, поряд з мін (тобто. скільки він може масштабуватися з внутрішніми елементами).

Перегляньте головну сторінку проекту для користувальницької демо-версії. Можна перетягнути кути контейнера для автоматичного зміни розміру гнучкого елемента всередині. Це досить прохолодно, тому що нижче, що ви знайдете придатний код безпосередньо з сторінки.

Існують способи обробки гнучких елементів за допомогою чистого CSS. Однак ці методи можуть відчувати себе відтоді, і вони не пропонують стільки контролю, скільки JavaScript.

Якщо ви хочете спробувати це просто схопіть копію з GitHub і подивитися, що ви думаєте.

Масштабованість все ще перебуває в активному розвитку, але це простий скрипт для редагування для ваших потреб.