Mise en page réactive animée avec requêtes multimédia CSS3

Le contenu de cet article concerne la mise en page réactive animée des requêtes multimédias CSS3. Les amis intéressés peuvent jeter un œil au contenu principal.

Que sont les requêtes multimédias

CSS3 nous apporte de nombreuses nouvelles fonctionnalités que nous utilisons pour la conception Web, l'une des fonctionnalités qui peuvent aider à améliorer la convivialité d'un site Web est Media Enquêtes.

Media QueriesBoilerplate

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

Modifications de mise en page animées

En utilisant CSS, nous pouvons ajouter des animations à vos différents éléments et nous pouvons également animer différents attributs attribués à ces éléments.

Si nous utilisons des requêtes multimédias, nous modifierons très probablement la largeur et la hauteur de l'élément afin qu'il puisse tenir sur la page. Nous savons que la largeur et la hauteur changent, nous pouvons utiliser le code suivant pour ajouter une animation aux propriétés CSS width et height.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!