Erstellen Sie mit Scalable.js Elemente zur automatischen Größenänderung

Wenn du musst machen Sie flexible Elemente, die ihre Behälter automatisch füllen Ich würde Scalable wärmstens empfehlen. Dieses kostenlose Open-Source-JS-Skript eignet sich hervorragend für die Erstellung eines flüssigen Designs ohne großen Stress.

Alles in der Scalable.js-Bibliothek kann angepasst werden, sodass Sie den Stil, die Größe, Position und den Inhalt jedes Containers ändern können. Benötigen Sie Elemente, die am oberen oder unteren Rand der Seite ausgerichtet sind? Skalierbar hat Optionen dafür.

Werfen Sie einen Blick auf das GitHub-Repo, um mehr darüber zu erfahren, wie dies funktioniert.

In der einfachsten Form enthält dieses Skript ein Zielseitenelement sowie einige Optionen zum Anpassen der Anzeige. Hier ist ein Beispielcode, der direkt aus GitHub stammt:

var scalable = new Scalable (containerEl, Optionen);

Der erste Parameter ist natürlich das Containerelement, auf das Sie abzielen (idealerweise a

oder etwas ähnliches).

Der options-Parameter sollte ein Array von key => value-Paaren enthalten. Diese Optionen umfassen Containerhöhenwerte, Min- und Max-Breiten sowie Min- und Max-Skalen (dh wie viel kann mit den internen Elementen skaliert werden).

Schauen Sie sich die Hauptprojektseite an, um eine brauchbare Demo zu erhalten. Sie können die Ecken des Containers ziehen, um die Größe des flexiblen Elements automatisch zu ändern. Dies ist ziemlich cool, da Sie unterhalb dieses Bereichs finden verwendbarer Code direkt von der Seite übernommen.

Es gibt Möglichkeiten, flexible Elemente mit reinem CSS zu behandeln. Diese Methoden wirken jedoch veraltet und bieten nicht so viel Kontrolle wie JavaScript.

Wenn Sie dies ausprobieren möchten, nehmen Sie einfach eine Kopie von GitHub und sehen Sie, was Sie denken.

Skalierbar befindet sich noch in der aktiven Entwicklung, aber es ist ein leicht zu bearbeitendes Skript für Ihre Anforderungen.