Quelles sont les meilleures pratiques pour rendre la mise en page évolutive?

Question

Quelle est la différence technique entre les configurations fluide vs liquide vs élastique vs flexible CSS?

Sont-ils tous identiques ou différents techniquement?

La mise en page fluide est-elle meilleure à la fois pour les mobiles et les utilisateurs d'ordinateurs?

Je pense qu'il n'y a que deux propriétés pour rendre la disposition fluide "em" et "%".

Et nous utilisons déjà "em" pour la police même dans les dispositions de largeur fixe. Quelles sont les autres choses que nous devons faire pour rendre le site flexible? Quelle partie devrait être flexible et laquelle serait mieux fixée? Ou devrions-nous rendre le tout flexible?

Answer 1

Je vous suggère de lire quelques articles sur ce sujet. Smashing magazine a un excellent article à ce sujet, pour voir which one is right for you. Ils ont quelques définitions au sujet de ces dispositions et je crois qu'ils sont très précis:

fixe:

Une mise en page de site fixe a une enveloppe qui est une largeur fixe, et les composants à l'intérieur ont soit largeurs de pourcentage ou largeurs fixes. La chose importante est que l'élément conteneur (wrapper) est configuré pour ne pas se déplacer. Quelle que soit la résolution d'écran du visiteur , il verra le même largeur que les autres visiteurs.

Fluide:

Dans une mise en page du site fluide, également appelé disposition liquide, la majorité des composants à l'intérieur ont largeurs de pourcentage, et ajuster ainsi la résolution de l'écran de l'utilisateur.

élastique:

Il y a une troisième option lorsque vous travaillez avec mises en page Web. Un design élastique est parfois préféré par les concepteurs de car il mélange les deux autres types de disposition principaux . Il fonctionne par en dimensionnant tous les éléments avec em. La citation ci-dessous explique exactement ce qu'est un et pourquoi cela peut être bénéfique.

Les avantages et les inconvénients dans l'article sont très concis aussi, avec des exemples et des recherches plus approfondies.

Si vous choisissez d'utiliser des dispositions «fluidiques», lisez their article about the subject as well.

Answer 2

Ils sont tous à peu près les mêmes. Si vous voulez être vraiment pointilleux, je suppose que vous pourriez dire que l'élastique a une largeur maximale, alors que le liquide pourrait continuer à augmenter en largeur tant que la fenêtre est élargie. Mais généralement, ils sont interchangeble.