Mise en page fluide
Une mise en page fluide est un type de page web conception dans laquelle la mise en page de la page est redimensionnée en tant que fenêtre la taille est changée. Ceci est accompli en définissant des zones de la page en utilisant des pourcentages au lieu de fixes pixel largeurs.
La plupart des mises en page Web comprennent une, deux ou trois colonnes. Dans les premiers jours de conception de sites Web, lorsque la plupart des utilisateurs avaient des tailles d’écran similaires, les développeurs Web attribuaient aux colonnes des largeurs fixes. Par exemple, une mise en page fixe peut inclure une zone de contenu principale de largeur 960px avec trois colonnes de largeurs 180px, 600px et 180px. Bien que cette disposition puisse sembler belle sur un écran 1024x768, elle peut sembler petite sur un écran 1920x1080 et ne tiendrait pas sur un écran 800x600.
Les dispositions fluides résolvent ce problème en utilisant des pourcentages pour définir chaque zone de la disposition. Par exemple, au lieu de créer une zone de contenu de 960px, un Web Developer peut créer une mise en page qui remplit 80% de l'écran et les trois colonnes peuvent occuper respectivement 18%, 64% et 18%. En utilisant des pourcentages, le contenu peut être agrandi ou réduit pour s’adapter à la fenêtre de l’ordinateur de l’utilisateur. le CSS utilisé pour créer une mise en page fixe par rapport à une mise en page fluide est présenté ci-dessous.
| Mise en page fixe | Mise en page fluide |
|---|---|
|
.content {width: 960px; } .left, .right {width: 180px; } .middle {width: 600px; } |
.content {width: 80%; } .left, .right {width: 18%; } .middle {width: 64%; } |
Les classes CSS dans les exemples peuvent chacune être affectées à une div dans une page HTML où le .la gauche, .droite biologique et .milieu les cours sont inclus dans le .contenu classe. La classe de contenu peut également être affectée à une table et les autres classes à des cellules de table. La largeur fixe .contenu La classe n'a pas besoin d'une largeur définie car elle s'étend automatiquement sur la largeur des cellules div ou de tableau incluses.
Fluid Layout vs Responsive Design
Les termes "mise en page fluide" et "web design réactif"sont parfois utilisés de manière interchangeable, mais il s’agit de deux choses différentes. Une page créée à l’aide de la conception Web réactive inclut des requêtes de média CSS, qui chargent des styles différents en fonction de la largeur de la fenêtre ou du type de périphérique utilisé pour accéder à la page. nécessite plus de CSS (et parfois JavaScript), mais offre également plus de contrôle sur la mise en page de la page.