Animiertes responsives Layout mit CSS3-Medienabfragen-CSS-Tutorial-php.cn

Animiertes responsives Layout mit CSS3-Medienabfragen

不言

Freigeben： 2018-11-07 15:59:17

Original

2195 Leute haben es durchsucht

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 */
}

Nach dem Login kopieren

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;

Nach dem Login kopieren

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!