Dans bootstrap, adaptatif fait référence à la division de l'appareil en quatre types : écran ultra-petit, écran moyen, écran moyen et grand écran en fonction de la taille de l'écran. La page Web sera divisée en 12 colonnes en fonction des différents écrans de l'appareil. et le navigateur divisera en lignes et en colonnes pour réaliser l'auto-adaptation ; quelle que soit la taille de l'écran, essayez de ne pas envelopper les lignes, mettez simplement à l'échelle horizontalement.
L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 5, ordinateur DELL G3
La largeur d'écran correspondante est :
Extra petit écran (téléphone portable) : 0-768px Le paramètre correspondant class=col-xs-number
seul com-xs-12 prend effet.
Principe : c'est l'écran de requête multimédia (appareil/navigateur) @media uniquement pour interroger la largeur de l'appareil
bootstrap est adaptatif signifie que peu importe ; de l'écran Quelle que soit la taille, essayez de ne pas envelopper les lignes, mettez simplement à l'échelle horizontalement. Bootstrap est adaptatif via le système de grille qui définit la taille du conteneur, le divise en 12 parties égales et divise le navigateur en lignes et en lignes. colonnes pour réaliser l’adaptation.
Les exemples sont les suivants :
@media only screen and (min-width:0px) and (max-width:480px){ body{ background-color:red; } } @media only screen and (min-width:481px) and (max-width:720px){ body{ background-color:green; } } @media only screen and (min-width:721px){ body{ background-color:blue; } }
Recommandations associées :
Tutoriel bootstrapCe 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!