Quelles sont les méthodes de mise en page CSS ?

Les méthodes de mise en page CSS incluent : 1. Mise en page statique (mise en page flottante et mise en page absolue) ; 2. Mise en page adaptative ; 3. Mise en page fluide (fixe à gauche + adaptatif à droite, largeur fixe à gauche et à droite + adaptation automatique au milieu, sacrée). disposition du Graal, disposition à double aile volante); 4. Disposition réactive 5. Disposition flexible.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Notre développement depuis CSS jusqu'à présent peut être résumé dans les catégories suivantes. Les méthodes d'implémentation que vous connaissez peuvent être les implémentations spécifiques des manières suivantes :

• Mise en page statique
• Mise en page adaptative
• Mise en page fluide (également connue sous le nom de mise en page en pourcentage%)
• Mise en page réactive : requêtes multimédias
• Mise en page flexible (mise en page rem/em flex)

Mise en page statique

La méthode de mise en page la plus traditionnelle. Toutes les tailles de la page Web sont en px car l'unité de largeur minimale est définie. Si la largeur est inférieure à cette largeur, une barre de défilement apparaîtra. plus grand que cette largeur, le contenu sera centré et l'arrière-plan sera ajouté.

Méthode d'implémentation :

PC : Mise en page centrée, tous les styles utilisent la largeur/hauteur absolue (px), concevez une mise en page, lorsque la largeur et la hauteur de l'écran sont ajustées, utilisez les barres de défilement horizontales et verticales pour afficher les parties masquées ;

Appareils mobiles : De plus, créez un site Web mobile, concevez une mise en page distincte et utilisez différents noms de domaine tels que wap ou. m.

Avantages : En utilisant la méthode de mise en page CSS2 précédente, la mise en page est simple et il n'y a aucun problème de compatibilité.

Inconvénients : Elle ne peut pas être affichée raisonnablement sur le téléphone mobile. La page PC ne peut pas être utilisée sur le téléphone mobile, et une autre mise en page doit être écrite pour la présenter.

Cas pratique :

Mise en page flottante
• Mise en page absolue

Mise en page adaptative

peut être considéré comme composé de plusieurs mises en page statiques sous différents écrans. La mise en page adaptative définit différentes mises en page pour différentes résolutions d'écran. La modification de la résolution de l'écran peut basculer entre différentes mises en page statiques (les positions des éléments de page peuvent changer), mais dans chaque mise en page statique, les éléments de page ne changent pas lorsque la taille de la fenêtre est ajustée. Mise en page adaptativeLa position des éléments dans la page changera, ce qui est une bonne solution à l'inconvénient de la faible utilisation du grand espace d'écran dans la mise en page fluide.

Lorsque la résolution de l'écran change, la position des éléments sur la page changera mais pas la taille.

Cas pratique : page d'accueil de recherche Baidu

(Partage de vidéos d'apprentissage :

tutoriel vidéo CSS)

Mise en page fluide

Le

pourcentage d'utilisation de la taille des principales zones divisées de la page Web (utilisé avec les attributs min-*, max-*), définit respectivement le format de mise en page pour différents écrans. changements, différentes mises en page apparaîtront, ce qui signifie que sur cet écran, le bloc d'éléments sera à cet endroit, mais sur cet écran, le bloc d'éléments apparaîtra à cet endroit. Seule la mise en page change, les éléments restent inchangés. Il peut être considéré comme constitué de plusieurs mises en page statiques sous différents écrans.

La caractéristique de la mise en page fluide est qu'à mesure que l'écran change, la mise en page de la page ne change pas de manière significative et peut être adaptée et ajustée. Cela complète simplement la mise en page adaptative.

Utilisez % de pourcentage pour définir la largeur, et la hauteur est principalement fixe en px Elle peut être ajustée en fonction de la taille en temps réel de la zone visuelle (fenêtre) et de l'élément parent pour s'adapter à différentes résolutions. autant que possible. Des propriétés telles que largeur maximale/largeur minimale sont souvent utilisées pour contrôler la plage de débit de taille afin d'éviter qu'elle soit trop grande ou trop petite et n'affecte la lecture. Cette méthode de mise en page a été utilisée pour gérer des écrans de PC de différentes tailles au début de l'histoire du développement web front-end (la différence de taille d'écran à cette époque n'était pas trop grande), c'est aussi utilisé dans le développement mobile d'aujourd'hui Méthodes de mise en page couramment utilisées , mais lacunes évidentes : Le principal problème est que si la taille de l'écran est trop grande, alors sur un écran qui l'est trop petit ou trop grand par rapport à son design original. Ne peut pas être affiché normalement. Étant donné que la largeur est définie à l'aide de %, mais que la hauteur et la taille du texte sont pour la plupart fixes en px, l'effet d'affichage sur un téléphone mobile à grand écran sera tel que la largeur de certains éléments de la page est étirée très longtemps, mais la hauteur et la taille du texte sont toujours les mêmes que ceux d'origine. Les mêmes (c'est-à-dire que ces choses ne peuvent pas devenir "fluides"

Lorsque la résolution de l'écran change, la taille des éléments sur la page changera mais la mise en page ne changera pas. .

Principaux cas pratiques :

• Gauche fixe + droite adaptative

• Largeur fixe gauche et droite + milieu adaptatif

Disposition du Saint Graal
Disposition à double aile volante

4. Mise en page réactive

La conception réactive peut permettre au site Web d'offrir une meilleure expérience de navigation et de lecture sur les téléphones mobiles et les tablettes. Différentes tailles d'écran entraîneront l'affichage de différents contenus de page Web pour les utilisateurs. L'utilisation de media query permet de détecter la taille de l'écran (principalement la largeur) et de définir différents styles CSS pour obtenir une mise en page réactive. S'appuie principalement sur des requêtes multimédias CSS.

Il y aura un style de mise en page sous chaque résolution d'écran, c'est-à-dire que la position et la taille des éléments changeront.

Requête multimédia de cas pratique

5. Mise en page flexible

• rem/em
• mise en page flexible

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!