Conseils pour l'utilisation des pourcentages

Bonjour,

bien que n'étant plus un débutant (globalement), je patauge largement dès qu'il s'agit de plus utiliser des dimensions exprimées en pixel.
Les em m'ayant donné une "bonne" migraine, je vais tenter ma chance avec les pourcentages, et refaire le design de mon site (qui est basé sur un grid layout).

J'apprécierais si quelqu'un pouvait me donner une explication claire sur les points suivants:

1. Est-il préférable d'également exprimer les dimensions des marges/gutters en pourcentages? Quels problèmes vais-je probalement rencontrer?

2. Je suis un maniaque de l'alignement vertical (pensez à Baseline CSS). Je vais devoir jouer sur les valeurs de line-height et de margin-bottom pour garder mes éléments bien alignés.
Encore une fois, quels problèmes vais-je probalement rencontrer en utilisant des valeurs en pourcentages?
C'était relativement simple avec les pixels, je doute que ce soit aussi facile avec les pourcentages.

Merci d'avance,
Markuz

Salut Markuz,

Pour la typo et ton rythme vertical, je pense que les pourcentages ne te simplifieront pas la tâche par rapport aux em ! Par contre, ça devrait être plus facile pour les largeurs.

Parmi les "trucs" qui peuvent être utiles :
- Pour la typo, tu peux redéfinir le font-size du body pour que 1em soit, par défaut (16px), équivalent à 10px.
- Toujours pour la typo, rem peut être encore plus facile à utiliser que em...
- Pour les largeurs, la propriété CSS box-sizing te permettra plus facilement de gérer tes largeurs en % et tes paddings/borders avec ce que tu veux !
- Sinon, globalement, fais attention aux arrondis des pourcentages qui peuvent te donner des largeurs totales supérieures à 100%.

Le tout en action...

Voili, voilou

Bonjour, et merci pour la réponse.

J'ai lu un article hier qui recommande d'éiter les pourcentages ET les em pour le line-height.
Qu'en penses-tu?

Pour l'instant, j'ai essayé les em et les rem, et j'en ai bavé Ceci-dit, je doit préciser que j'ai essayé de tout dimensionner avec les em/rem (le wrapper, les éléments comme header, footer...).
Peut-être que ce sera mon compliqué en utilisant également d'autres valeurs.

Au sujet des pourcentages, et des arrondis, j'ai lu un autre article qui recommande de fixer la valeur du container à 1000px.
Comme tu peux le voir sur la page, il reste certains soucis s'alignement.
Que penser de cette méthode?

Markuz

Crest a écrit :
J'ai lu un article hier qui recommande d'éiter les pourcentages ET les em pour le line-height.
Qu'en penses-tu?

C'est un bon plan. Ça évite effectivement certains soucis d'héritage.
Néanmoins, ça reste la même logique qu'avec n'importe quelle unité relative (em ou %).
Et en ce qui me concerne, j'ai souvent une hauteur de ligne "globale" pour le "labeur" et des hauteurs de ligne différentes pour les titres et contenus un peu particuliers que je spécifie conjointement aux tailles de police...
A noter également que l'utilisation d'un préprocesseur (Sass pour moi, ou Less, ou Stylus) permet de simplifier tout ça et de convertir facilement ton design avec de tailles en px en unités relatives.
Après, en ce qui concerne l'accessibilité (zoom texte vs zoom layout), beaucoup de choses ont également été écrites...

Je ne peux que te conseiller la lecture de Webgrids d'Anne-Sophie Fradier !

Crest a écrit :
Au sujet des pourcentages, et des arrondis, j'ai lu un autre article qui recommande de fixer la valeur du container à 1000px.
Comme tu peux le voir sur la page, il reste certains soucis s'alignement.
Que penser de cette méthode?

Mouais... 1000px, ça reste une contrainte pas très "responsive"...

tm