Responsive Design ist allgegenwärtig, und unabhängig davon, ob Sie ein Framework verwenden oder selbst Medienabfragen schreiben, müssen sich einige Elemente auf Ihrer Seite zwangsläufig verschieben oder skalieren.
Wenn Ihre Medienabfragen auf Browserabmessungen basieren und die Größe des Browsers geändert wird, werden Ihre Elemente an die richtige Stelle gesetzt. Das Hinzufügen einer kleinen Animation zu diesen Eigenschaften ist eine nette Geste für jede responsive Website.
Heute zeige ich Ihnen, wie einfach es ist, diesen zusätzlichen Touch hinzuzufügen, indem Sie die Breite und Deckkraft von Elementen zwischen Medienabfragen animieren.
Das Layout
Für dieses einfache Beispiel verwenden wir ein Div, das drei kleinere Divs enthält. Die Divs werden entsprechend der Größe des Browserfensters skaliert. Der HTML-Code ist einfach:
Jetzt platziert unser Haupt-CSS die drei Kästchen innerhalb des Haupt-Div und außerdem in einer Linie mit einem Rand nach rechts:
.Layout {
Breite:960px;
Höhe:600px;
Hintergrund:#b34d6f;
Rand:auto;
}
.Kasten {
Breite:300px;
Höhe:200px;
Rand rechts: 25px;
Hintergrund:#4d77b3;
display:inline-block;
margin-top:50px;
}
.box:last-child {
margin-right:0px;
}
Dies ist unser Hauptlayout. Ohne Medienabfragen passt sich dieses Layout nicht an, wenn sich das Ansichtsfenster ändert. Nachdem wir nun die Grundlagen geschaffen haben, fügen wir die Medienabfragen hinzu.
Medienabfragen hinzufügen
Medienabfragen werden heutzutage häufig verwendet. Die meisten Webdesigner verstehen sie, aber falls dies Ihr erstes Mal ist, hier eine kurze Auffrischung: Medienabfragen überprüfen die Leistungsfähigkeit des von Ihnen verwendeten Geräts (Breite, Ausrichtung und Auflösung) und führen spezifisches CSS aus, wenn die für die Medien festgelegten Bedingungen erfüllt sind Abfrage erfüllt sind. In unserem Beispiel verwenden wir zwei Medienabfragen, die prüfen, ob der Browser kleiner als 960 Pixel ist und ob er kleiner als 660 Pixel ist. Anschließend legen wir die Breite der Elemente entsprechend fest und blenden auch das letzte untergeordnete Div aus, damit die anderen beiden mehr Platz haben:
@media screen und (max-width:960px) {
.Layout {
Breite: 870px;
}
.Kasten {
Breite:270px;
}
}
@media screen und (max-width: 660px) {
.Layout {
Breite:570px;
}
.Kasten {
Breite: 170 Pixel;
}
.box:last-child {
Deckkraft:0;
}
}
Das ist alles, was wir für unsere Medienanfragen benötigen. Beachten Sie, dass es wichtig ist, dass dieser Code unter dem ursprünglichen CSS-Code oben platziert wird, damit die Medienabfragen den darüber liegenden Code überschreiben. Wenn Sie Ihre Datei jetzt testen, werden Sie feststellen, dass sich die Größe der Divs und die Deckkraft des letzten untergeordneten Divs ändern, wenn Sie die Größe des Browserfensters ändern.
Sie werden feststellen, dass wir zum Ausblenden des letzten untergeordneten Divs seine Deckkraft auf 0 setzen, anstatt es auf display:none zu setzen. Das liegt daran, dass wir die Eigenschaft animieren möchten; Die Deckkraft hat viele verschiedene Grade, während die Anzeige entweder wahr oder falsch ist (und daher nicht animiert werden kann).
Animation hinzufügen
CSS-Animationen haben sich als sehr praktisch erwiesen, wenn wir diese kleinen Animationen ausführen, die wir früher in jQuery ausgeführt haben, wie zum Beispiel die Animation von Farbe, Breite und Deckkraft.
Da wir möchten, dass die Seite als Ganzes animiert wird, verwenden wir den CSS-Selektor * und richten unsere Animation ein. CSS-Animationen verschlechtern sich problemlos, aber Sie sollten auch die Herstellerpräfixe hinzufügen, damit so viel Unterstützung wie möglich vorhanden ist:
*{
-webkit-transition:alle 1s einfach;
-moz-transition:alle 1s Leichtigkeit;
-o-transition:alle Einsen erleichtern;
Übergang:alle Einsen leicht;
}
Sie können das fertige Ergebnis sehen Hier.
Abschluss
Das Hinzufügen einfacher Animationen wie dieser rundet jede Website ab. Ein paar Codezeilen verleihen Ihrer responsiven Website einen wirklich schönen Schliff.
Haben Sie in einem Projekt animierte Medienabfragen? Welche Effekte haben Sie erzielt? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Bild skalieren über Shutterstock.
