Comment configurer div pour qu'il change avec la taille de la fenêtre en CSS

Comment utiliser CSS pour définir un div pour qu'il change avec la taille de la fenêtre : créez d'abord un nouveau div et définissez le style d'initialisation ; puis ajoutez une transition au div, puis ajoutez une requête multimédia CSS3 et enfin modifiez ; la taille de la fenêtre pour voir l'effet.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

Configurez le div pour qu'il change de style à mesure que la taille de la fenêtre change. Vous pouvez utiliser des requêtes multimédias CSS3 pour y parvenir. !

Le paramètre CSS du div change avec la taille de la fenêtre

1 Créez un nouveau div et définissez le style d'initialisation

Ajoutez une transition au div lorsque le div est défini. les changements de style auront un effet d'animation.

.app{
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    transition: all .5s;
}
<div class="app">app</div>

2. Ajoutez des requêtes multimédias

Définissez les divs sur différents styles lorsque la largeur de l'écran est de 300, 250, 200 et 150 respectivement.

@media (max-width: 300px){
    .app{
        height: 50px;
    }
}
@media (max-width: 250px){
    .app{
        width: 50px;
    }
}
@media (max-width: 200px){
    .app{
        border-radius: 10px;
    }
}
@media (max-width: 150px){
    .app{
        border-radius: 50px;
    }
}

3. Modifiez la taille de la fenêtre et vérifiez l'effet :

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!