La disposition fluide élastique CSS répond à un affichage de contenu différent

Aujourd'hui, alors que les moniteurs des utilisateurs sont de plus en plus grands, l'ancienne disposition à largeur solide de 1024 x 768 devient de plus en plus obsolète. Pour les utilisateurs disposant de grands écrans, l'espace vide des deux côtés donne aux gens une impression sérieuse à première vue. gaspillage, en tant que concepteur de sites Web, vous avez la responsabilité de fournir à ce groupe d'utilisateurs une bonne interface utilisateur.

Bien entendu, afin de réduire ce gaspillage d'écran, l'utilisation d'une disposition fluide élastique est la meilleure solution. Elle permet d'utiliser pleinement l'espace de l'écran et d'afficher le contenu en plein écran, quelle que soit la résolution que vous utilisez. Cependant, en raison de diverses limitations, les pages Web actuelles ne sont pas encore prêtes à adopter pleinement une mise en page élastique et fluide (en particulier le piétinement gratuit des normes par les fabricants de navigateurs et la prise en charge incomplète des normes CSS, etc.). En tant qu'intermédiaire entre utilisateurs et fabricants, nous ne pouvons nous adapter à l'écart entre les deux qu'avec une mentalité compatible. Par conséquent, comme solution de transition, il existe une telle disposition : disposition élastique + largeur fixe.

L'élasticité mentionnée ici signifie que l'arrière-plan s'adapte à la largeur de l'écran, tandis que la largeur fixe signifie que le contenu du texte peut être automatiquement centré en écran large ou en écran étroit. Survivez dans les fissures pour répondre aux besoins des utilisateurs avec des résolutions de différentes tailles. La conception présentée ci-dessous est un exemple typique.

Sans plus tarder, passons aux choses sérieuses. Créons une structure de mise en page comme celle-ci.

Construisez d’abord la couche de structure :

Analysez la couche structurelle. Une page Web comprend généralement trois parties : l'en-tête, la zone de contenu et le pied de page. Nous plaçons l'en-tête et le contenu dans une couche conteneur, nommée wrapper, et séparons le pied de page, nommé wrapper. Pourquoi est-il conçu ainsi ? Nous voulons que ce pied de page soit absolument en bas, même lorsque la zone de contenu fait moins d'un écran.

Nous réglons la largeur des deux conteneurs, wrapper et footer, à 100% pour qu'ils s'adaptent automatiquement à la largeur de l'écran. Et définissez également la zone d’en-tête sur une largeur de 100 %. De cette façon, nous pouvons insérer une image qui peut être carrelée horizontalement dans l'en-tête et le pied de page, de sorte que l'arrière-plan de l'en-tête et du pied de page puisse remplir tout l'espace de l'écran horizontalement sur un grand écran.

Quant au contenu principal du texte, notre approche générale consiste à l’afficher au centre lorsque la résolution devient plus grande, en laissant un espace vide des deux côtés. Étant donné que la zone d'en-tête a été définie sur une largeur de 100 %, nous ajoutons une autre couche de conteneur à l'en-tête, qui sert de support au contenu réel du texte d'en-tête. Nous définissons ensuite une valeur de largeur fixe, par exemple 960 pixels. et laissez-le se centrer.

De cette façon, le texte principal de l'en-tête de la page flotte sur la couche supérieure de l'en-tête. Ces deux couches peuvent être définies avec des images d'arrière-plan différentes pour former une superposition. effet d'en-tête, qui peut automatiquement adapter une résolution d'écran plus grande.

De la même manière, le pied de page peut également être implémenté en utilisant cette méthode.

Dans la couche structurelle ci-dessus, je n'ai pas utilisé cette méthode dans la zone de contenu intermédiaire, mais j'ai apporté un petit changement. Nous pouvons voir que dans la zone de contenu, il n'y a pas de conteneur intégré, mais un seul conteneur. Que devons-nous faire si nous voulons éviter que les deux côtés du texte apparaissent vides en haute résolution. Bien sûr, vous pouvez utiliser les méthodes d'en-tête et de pied de page et ajouter un div à son contenu ? Bien entendu, afin de réduire l’imbrication, nous pouvons utiliser des solutions de contournement. Nous pouvons ajouter une très grande image à l'arrière-plan du corps et utiliser background-position pour positionner et centrer l'image afin que les images des deux côtés de la zone de contenu soient affichées.

Ce blog est un cas spécifique. Si vous regardez les images des deux côtés de ce blog en haute résolution puis réduisez la fenêtre, vous pouvez voir que seule une petite zone des images des deux côtés est affichée à 1024*. 768, tandis que le texte principal est toujours affiché au centre.

Pour démontrer l'effet, nous ajoutons d'autres ajustements de couleur, et le style final est le suivant :