Ce qui suit utilise viewportWidth pour représenter la largeur de la fenêtre du navigateur.
- Petite fenêtre [également appelée petit écran à certains endroits] (sm-small) : 576px<= viewportWidth < 768px ;
- Fenêtre d'affichage moyenne [également appelée écran moyen à certains endroits] (md-medium) : 768px<= viewportWidth < 992px ;
- Grande fenêtre [également appelée grand écran à certains endroits] (lg-large) : 992px<= viewportWidth< 1200px ;
- Très grande fenêtre d'affichage [également appelée très grand écran à certains endroits] (xl-x large) : 1200px<=viewportWidth ;
Notez que ces tailles sont basées sur les paramètres par défaut de Bootstrap, vous pouvez personnaliser ces tailles selon vos besoins.
Pour des exemples détaillés, veuillez visiter l'article de blog https://blog.csdn.net/wenhao_ir/article/details/132667178 , puis recherchez « Diviser également la largeur de la colonne sur toutes les tailles de largeur de fenêtre ».
Remarque spéciale : les pixels de l'écran du terminal mobile et la taille de la fenêtre d'affichage du navigateur sont deux choses différentes. Habituellement, la résolution d'écran des appareils mobiles sera plus élevée, mais afin d'offrir une meilleure expérience utilisateur, les pages Web mobiles utilisent généralement une taille de fenêtre plus petite pour garantir que le contenu s'affiche correctement à l'écran sans obliger l'utilisateur à zoomer et à constamment zoomer. faire défiler. Pour plus de détails, voir : https://blog.csdn.net/wenhao_ir/article/details/132685050