Conversion pix/cm

[F6EEQ]

Bonjour,

Une question probablement basique...

Je cherche une équivalence entre les différentes façon de mesurer une largeur/hauteur, évaluer une taille de police...
Une petite recherche sur le site ne m'a rien donné d'utile.
Sur gogol j'ai trouvé quelques convertisseurs pix/cm, mais sont-ils bien adaptés au design d'un template, et surtout, est-ce que ça dépend de l'affichage?

Pour info je travaille avec Template Creator CK, qui est assez sympa à utiliser, mais ce n'est pas toujours facile de dimensionner les images ou polices. J'y vais un peu au pif, et ça prend du temps pour pas grand résultat.

Y a-t-il une méthode plus "scientifique" ??
Doit-on compter sur une largeur "standard"?

Merci de vos infos.

[lesoutier]

Les pixels et les centimètres sont des unités matérielles, figées, qui ne sont plus utilisées pour la conception de templates. De nos jours les templates sont responsives et utilisent des unités relatives, telles que les em. J'avais une ou deux URLs sur le sujet, mais je ne les retrouve malheureusement plus.

[lomart]

+1 avec lesoutier

La règle de conversion est simple mais dépend de la résolution de l'écran. Sur un PC de bureau la résolution est le plus souvent de 96px/inch. donc 1cm contient environ 37pixels. Un écran Retina fait 227px/inch, donc il faut 2.5 fois plus de pixels pour remplir 1 cm.

Le mieux est de faire une page test avec différentes tailles en em ou rem
La hauteur et donc la lisibilité dépendent aussi de la police utilisée

[lefabdu51]

pour utiliser les rem et em, il faut définir une taille de police par défaut.
Ces unités sont des echelles par rapport à la taille par défaut.
Pour une taille par defaut de de la police de 16px, 0.5em = 8px, et 2em = 32px.
Pour une taille par defaut de de la police de 10px, 0.5em = 5px, et 2em = 20px.
la balise à cibler est generalement la balise body ou html.

Une methode pour les images est d'utiliser les requetes media comme ceci

/* toutes les images occuppent 100% de l espace disponible */
img {width:100%;}
/* on definit la valeur maximum pour chaque viewport */
[USER="80685"]media[/USER] screen and (max-width:480px){
img {max-width:350px;)
}
}

tu peut cibler les images en fonction de leur classe.
Avec l'inspecteur d'éléments tu pourras trouver des classes css à utiliser.
lien utile : https://developer.mozilla.org/fr/doc..._Media_queries

[F6EEQ]

OK et merci pour vos infos.

Je viens aussi de regarder sur W3C pour des explications sur "em".
Reste maintenant à comprendre pour des images comment les dimensionner.

Pour exemple, à côté de mon logo, en tête de page, je voudrais mettre un slide show avec des images longues (à peu près la largeur du template) mais pas plus hautes (ou presque) que le logo.
Je vais regarder avec l'inspecteur gadget de FFox, c'est vrai que c'est très utile.

Bon WE.

[lomart]

Bonjour,

Pour les images, il est important que les images aient la taille maximale à laquelle elles peuvent être affichées en responsive. C'est ensuite au CSS de les redimensionner pour les autres tailles d'écran.

Pour la taille des caractères, j'ai fait une page test pour tester et comprendre la différence entre les différentes unités disponibles. Cela peut aussi servir à choisir la taille de police en fonction des valeurs font-size dans html et body. Cette page est visible ici : https://lomart.fr/references/100-taille-police

[F6EEQ]

Merci pour le lien. Très instructif et plein de renseignements utiles.

Bon WE.

[lefabdu51]

Pour info, la resolution la plus importante n'est pas celle du peripherique du visiteur de ton site, mais bel et bien celle de tes images.
Plus la résolution est élevée, plus tu peut zoomer dans celle ci sans perdre de qualité, ou l'afficher en pleine largeur sur un périphérique dédié.
la résolution optimale d'une image dépend surtout de son usage :

pour une icone, tu peut passer en faible résolution car l'affichage de celle ci resteras sur une toute petite zone, et garder des images hautes
résolution pour les images importantes et ou le zoom à l'interieur de celle ci est important.
une image de slideshow sur ta page d acceuil a pour vocation à être cliquée et non zoommée, donc inutile qu'elle fasse 2MO ou plus.
Mais si c est une galerie d'image, la tu peut la garder en haute resolution.

Il faut garder un equilibre entre résolution et usage, car plus ton image a une résolution élévée ou est de grande taille, plus elle mettras de temps a s afficher.