Створюйте елементи автоматичної зміни розміру за допомогою Scalable.js
Якщо потрібно роблять гнучкі елементи, які автоматично заповнюють свої контейнери Я дуже рекомендую Scalable. Цей безкоштовний JS скрипт з відкритим вихідним кодом ідеально підходить для створення дизайну рідини без особливого стресу.
Все в бібліотеці Scalable.js є податливим, тому ви можете змінювати стиль, розмір, положення та внутрішній вміст кожного контейнера. Потрібні елементи, вирівняні у верхній або нижній частині сторінки? Масштабується має варіанти для цього.
Загляньте в репо GitHub, щоб дізнатися більше про те, як це працює.
У самому основному вигляді цей сценарій приймає елемент цільової сторінки разом з деякими варіантами налаштування дисплея. Ось приклад коду, взятого безпосередньо з GitHub:
var scalable = new Масштабується (containerEl, варіанти);
Природно, що першим параметром є будь-який контейнерний елемент, на який ви націлюєте (в ідеалі a Параметр options повинен приймати масив пар ключів => значення. Ці варіанти включають значення висоти контейнера, мінімальна та максимальна ширини, поряд з мін (тобто. скільки він може масштабуватися з внутрішніми елементами). Перегляньте головну сторінку проекту для користувальницької демо-версії. Можна перетягнути кути контейнера для автоматичного зміни розміру гнучкого елемента всередині. Це досить прохолодно, тому що нижче, що ви знайдете придатний код безпосередньо з сторінки. Існують способи обробки гнучких елементів за допомогою чистого CSS. Однак ці методи можуть відчувати себе відтоді, і вони не пропонують стільки контролю, скільки JavaScript. Якщо ви хочете спробувати це просто схопіть копію з GitHub і подивитися, що ви думаєте. Масштабованість все ще перебуває в активному розвитку, але це простий скрипт для редагування для ваших потреб.