


Comment configurer div pour qu'il change avec la taille de la fenêtre en CSS
Dec 18, 2020 am 09:39 AMComment 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment introduire des images dans vue

Quelle est la fonction de la balise span

Dans quelle langue le plug-in du navigateur est-il écrit ?
