Dans un autre article de mon article "Elastic + Fixe Width Layout", j'ai introduit un plan de mise en page avec élastique plus la largeur fixe minimale, et maintenant je présenterai un autre plan de mise en page - disposition du fluide élastique.
Cette solution est en fait une application flexible de cette mise en page. Le plus grand avantage de la disposition élastique est qu'il peut utiliser pleinement l'espace d'écran. Peu importe la taille de la résolution du client, il peut s'adapter automatiquement aux changements de largeur.
Photo 1
Jetez un œil à l'image ci-dessus. Il s'agit d'un site Web étranger. Il s'agit d'une disposition à largeur fixe. Notre mise en page est basée sur cette image. Bien sûr, je ne donnerai pas une introduction complète à la façon de faire cette page complète, je ne l'expliquerai qu'aux points clés.
En fait, il est relativement simple de faire une disposition élastique, mais bien que cette mise en page soit simple, la compréhension des détails est l'essence de cette disposition. Bien que la disposition élastique ait de si bons avantages, il a des défauts relativement mortels:
Par conséquent, cet article peut avoir relativement moins d'explications sur la mise en page, et il s'agit davantage de résoudre les deux problèmes ci-dessus. Je crois que tant que les deux problèmes ci-dessus sont résolus, cette disposition sera relativement plus facile.
Généralement, les dispositions élastiques utilisent des pourcentages pour définir la largeur d'un conteneur. Cela s'adaptera automatiquement à la largeur de l'écran. Cependant, la valeur de largeur ne peut pas être complètement librement mise à l'échelle par l'utilisateur. Nous devons limiter sa largeur minimale dans ce pourcentage de largeur. Lorsque l'utilisateur rétrécit la fenêtre sur une certaine valeur, la fenêtre ne sera plus mise à l'échelle.
Les amis qui connaissent CSS savent qu'il y a quatre attributs comme celui-ci:
Ces quatre attributs peuvent simplement résoudre ce problème. Êtes-vous heureux? Mais ne soyez pas occupé. Bien qu'ils puissent résoudre ce problème, il y a un problème grave. Le navigateur IE6, qui est le plus utilisé par les utilisateurs, ne prend pas en charge ces attributs. C'est une très mauvaise chose. Nous ne pouvons pas jeter le navigateur avec le plus d'utilisateurs!
Il existe quatre méthodes populaires sur Internet pour résoudre le problème que IE6 prend en charge ces quatre attributs:
Les trois premiers ont des inconvénients, veuillez choisir la méthode la plus appropriée. Je préfère le dernier. Ceci est réalisé par un grand étranger. Vous pouvez voir les exemples pertinents ici: http://www.doxdesk.com/software/js/minmax.html
Avec ce fichier JS, il vous suffit d'appeler ce fichier JS dans l'en-tête.
PS: Pour plus de commodité dans le modèle de démonstration, j'appelle cela JS comme référence interne. Dans l'application réelle, vous allez créer ce fichier JS dans un fichier externe JS et l'appeler comme suit:
<script type = text / javascript src = minmax.js> </ script>
Nous appliquons simplement la largeur min aux deux conteneurs #Wrapper et #footer dans la feuille de style, et définissons leur largeur à 100% respectivement. D'ACCORD. Nous avons maintenant résolu le problème de la largeur minimale.