En css tu as plusieurs façons de gérer les redimensionnements. Voici quelques méthodes :
1) Utilisation de "Media Queries"
@media (max-width : 200px) {
/*changements à appliquer lorsque l'écran la taille est < 200px*/
}
Par exemple pour une div>img
<div class="img-container">
<img src="" alt=""/>
</div>
Tu as par exemple le code css
.img-container{
width : 300px ;
}
Maintenant tu souhaites que sur de plus petits écrans l'image prenne non plus 300px mais la largeur totale de l'écran.
@media (max-width : 300px){
/*ce code s'applique uniquement lorsque la taille est <= 300px*/
.img-container{
width : 100 %;
}
}
2) Utilisation de "vh" et "vw"
vh et vw signifient respectivement à "viewport height" er "viewport width" et correspondent à la hauteur et largeur de l'écran. Cela veut dire que tu peux définir des élements qui ont à tout moment une hauteur ou une largeur proportionnelle à celle de l'écran. Par exemple
.img-container{
width : 80vw ;
}
Cela signifie qu'a tout moment .img-container aura 80 % de la largeur de l'écran : il s'adapte donc parfaitement au changement de tailles d'écrans.
Après tu peux aussi mélanger les deux approches du genre
.img-container{
width : 80vw ;
}
@media (max-width : 300px){
.img-container{
width : 90 vw;
}
3) Utilisation des flex-box
Tu peux utiliser les flex-box pour gérer le positionnement des éléments et faire en sorte que ceux-ci s'adaptent lors du redimensionnement par exemple avec les propriétés flex-wrap ou encore justify-content
Tu peux trouver un tuto ici
Flex-box
Bonus : comment simuler les écrans plus petits😜
-->Sur pratiquement tous les navigateurs tu peux utiliser la console pour réduire la taille de l'écran. Pour cela :
-Clique droit dans la page
-Cilquer sur console
-Cliquer sur l'icône de smartphone en haut de la console
-Vous pouvez maintenant choisir les tailles d'écrans où même un périphérique particulier.
-->Simuler sur un vrai périphérique
Si tu utilises live server ou tout autre "lanceur" tu peux envoyer le résultat de ton code(la page web) directement sur un périphérique réel comme un smartphone ou une tablette ou même un autre ordinateur.
- La première étape consiste à lancer ton serveur normalement par exemple en ouvrant
live server sur vscode
- Puis tu crées un point d'accès entre ta machine et le/les périphériques en question( ton ordi peux être l'émetteur ou le récepteur 😜)
-
Sur Windows si tu veux le créer à partir de ton ordi tu peux ouvrir l'invite de commande en mode admin et faire
netsh wlan set hostednetwork mode=allow ssid=nom_du_wifi key=password
netsh wlan start hostednetwork
tu connectes maintenant le périphérique au wifi que tu viens de créer.
-Toujours dans le terminal tu tape ipconfig et tu récupères l'adresse IPV4 de ta machine
-
tu entre cette adresse dans le navigateur du périphérique en question en ajoutant : port port ici est le numéro du port sur lequel ton projet tourne. Avec live server de vscode le port est très souvent 5500
On aura donc par exemple http://192.168.43.1:5500
Maintenant tu peux tester ton "responsive" sur tous les ecrans que tu veux 😎
Il y a des jours où j'aime vraiment écrire 😅