Le meilleur moyen pour rendre son site internet responsive consiste à utiliser des valeurs en pourcentage, tandis que le meilleur moyen de mettre en place une maquette, passe souvent par les pixels. Pour mettre tout le monde d’accord, il existe un mode de calcul aussi simple qu’efficace pour passer des pixels aux pourcentages : cible ÷ contexte = résultat. En d’autres termes, on prend la valeur de la cible en pixel, on la divise par le contexte (la valeur en pixel de l’élément parent) pour obtenir un ratio qu’il suffira de multiplier par 100 pour avoir les précieux pourcentages. →
Archives des tags : Pourcentage
940.css version fluide — Grille de mise en page en pourcentage
La grille de mise en page 940.css — issue de la technique Calculer une grille de mise en page « typo » avec le nombre d’Or — existe désormais en version fluide avec des valeurs exprimées en pourcentage à la place des pixels. J’ai choisi des pourcentages permettant d’utiliser la grille de 940.css «version fixe» lorsque le .container
est réglé sur 940px
. Ceci permet de caler les blocs sur la grille fixe placée en background
et de remettre une valeur en pourcentage sur le container lorsque la mise en page est terminée. →
Nouvelle méthode de remplacement de texte par une image
Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent
avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size
: →
PXtoEM : Conversion Pixel — EM
PXtoEM est un outil simple et pratique créé par Brian Cray qui permet de connaitre les correspondances entre les tailles de polices de caractère exprimées en pixels avec les autres unités que l’on rencontre sur le web comme les EM’s, les pourcentages ou les points. Cette dernière unité, plus particulièrement utilisé dans les documents destinés à l’impression, trouvera à s’exprimer dans votre feuille de style destinée à l’impression. →