Animiertes responsives Layout mit CSS3-Medienabfragen

Der Inhalt dieses Artikels befasst sich mit dem animierten Responsive-Layout von CSS3-Medienabfragen. Werfen wir einen Blick auf den Hauptinhalt.

Was sind Medienabfragen?

CSS3 bringt uns viele neue Funktionen, die wir für das Webdesign verwenden. Eine der Funktionen, die dazu beitragen können, die Benutzerfreundlichkeit einer Website zu verbessern, sind Medien Anfragen.

MedienabfragenBoilerplate

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Animierte Layoutänderungen

Mit CSS können wir Ihren verschiedenen Elementen Animationen hinzufügen und auch verschiedenen Eigenschaften von Animationen zuweisen diese Elemente.

Wenn wir Medienabfragen verwenden, ändern wir höchstwahrscheinlich die Breite und Höhe des Elements, damit es auf die Seite passt. Da wir wissen, dass sich sowohl die Breite als auch die Höhe ändern, können wir den folgenden Code verwenden, um den CSS-Eigenschaften „Breite“ und „Höhe“ eine Animation hinzuzufügen.

/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 1s;
/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 1s;

Das obige ist der detaillierte Inhalt vonAnimiertes responsives Layout mit CSS3-Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!