Създайте елементи за автоматично преоразмеряване с Scalable.js
Ако трябва направете гъвкави елементи, които автоматично запълват контейнерите си Бих силно препоръчвам Scalable. Този свободен JS скрипт с отворен код е идеален за създаване на течен дизайн без много стрес.
В библиотеката Scalable.js всичко е податливо, така че можете да променяте стила, размера, позицията и вътрешното съдържание на всеки контейнер. Необходими са елементи, подравнени в горната или долната част на страницата? Мащабируемият има опции за това.
Обърнете внимание на GitHub repo, за да научите повече за това как работи.
В най-основната си форма този скрипт взема елемент на целевата страница заедно с някои опции за персонализиране на дисплея. Ето някои примерни кодове направени директно от GitHub:
var scalable = new Мащабируем (containerEl, опции);
Естествено, първият параметър е който и да е елемент на контейнер, който насочвате (в идеалния случай a Параметърът options трябва да вземе масив от двойки ключ => стойност. Тези опции включват стойности на височината на контейнера, минимална и максимална ширина, заедно с макс (т.е. колко може да мащабира с вътрешните елементи). Разгледайте главната страница на проекта за използваема демо версия. Можете да плъзнете ъглите на контейнера за автоматично преоразмеряване на гъвкавия елемент вътре. Това е доста готино, тъй като под тази област ще намерите използваем код направени директно от страницата. Има начини да се справят с гъвкави елементи само с чист CSS. Въпреки това, тези методи могат да се чувстват датирани и не предлагат толкова контрол, колкото JavaScript. Ако искате да опитате това, просто вземете копие от GitHub и вижте какво мислите. Скалируемият все още е в активно развитие, но е лесен за редактиране скрипт за вашите нужди.
