Comment le framework bootstrap s’adapte-t-il aux téléphones mobiles ?

Dans le monde d’aujourd’hui où il y a de plus en plus de terminaux mobiles, il serait trop coûteux de s’adapter et de se développer pour tous les écrans.

Le développement adaptatif permet à un site Web d'être compatible avec plusieurs terminaux. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

La mise en page adaptative peut permettre au site Web d'avoir une meilleure expérience de lecture sur les ordinateurs, les tablettes et les téléphones mobiles, et la taille de l'écran le fait peu importe Le contenu de la page Web affichée à l'utilisateur est également différent. Nous pouvons utiliser des requêtes multimédias pour détecter la taille de l'écran (principalement en détectant la largeur) et définir différents styles CSS pour obtenir une mise en page réactive.

Principe du développement réactif : requête média

Requête média, interroge la largeur de l'écran actuel (média), pour différents écrans Ensembles de largeurs différents styles pour s'adapter à différents écrans. Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur. En termes simples, vous pouvez définir différents styles sous différents écrans pour vous adapter à différents écrans.

Méthode d'implémentation : Spécifiez la mise en page de la page Web d'une certaine plage de largeur en interrogeant la largeur de l'écran.

Ultra petit écran (appareil mobile) avec<768px

Appareil petit écran 768px-992px 768 <= w <992

Écran moyen 99 2px- 1200px 992 =

Appareils à écran large de 1200px ou plus w>=1200

Syntaxe CSS :

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

Plus de techniques liées à Bootstrap articles, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

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!