Utilisation des rem

ok je vais checker tout ca !
d'ailleur ca me donne une idée
un peu comment sur pbck
la gestion des typo en fonction des resolution dans le responsive deign (body, h1=>h6)
sinon tout roule

hello je reviens sur ce poste j'ai integré les rem comme dans nos echanges ... mais il semble que l'adaptation en mobile ne fonctionne pas bien sur mes titres
exemple ici
www.cocoonauto.fr/

Par exemple sur un H1 3.33rem on devrait avoir : Sur desktop 3.33 x 18 => 60px Sur mobile 3.33 x 14 => 46,62px
Or on a actuellement desktop => 53 px Mobile => 53 px
La valeur en rem est OK mais la valeur rendue en PX n'est pas bonne.

tu aurais une idée de mon erreur ?
Merci par avance

Salut


Je viens de me lancer dans les valeurs rem pour mon site également (caravane-camping-be)

Pour ce faire, j'ai mis dans responsive design (d'après mes différentes lectures)
ordinateur
html { font-size: 62.5%; }
tablette
html { font-size: 56.25%; }
Mobile
html { font-size: 50%; }

Pourquoi en % car cela permet pour un affichage sur ordinateur d'avoir 1rem = 10 px
car la taille de la police de base est de 16px

si je fais 10 px / 16px, j'obtiens 0.625

Après, je détermine le % pour les tablettes et les mobiles.

si tablette 9px donc 9/16 = 56,25%
si mobile 8 px donc 8/16 = 50%
Après il suffit de mettre une valeur en rem pour h1, h2, h3 identique pour ordinateur, mobile
par exemple pour

H1= 1.8rem car dans mon exemple = 1.8 * 10 (taille de base) = 18px
H2= 1.5rem car dans mon exemple = 1.5 * 10 (taille de base) = 15px

La taille sera ajustée en fonction de ce que tu as mis dans responsive design
par exemple
H1 ordinateur = 1.8 *10 = 18px
H1 mobile = 1.8* 10* 0.5 = 9px


Je ne sais si c'est correct ou bien expliqué mais cela fonctionne assez bien.

théoriquement pas besoins de mettre des % .... non ?

je dois t'avouer, que je découvre à peine les valeur rem que je ne connaissais pas avant ton message.

Et en lisant ci et là des informations sur cette valeur, j'en ai déduis ce que j'ai écris plus haut.

Maintenant , il faudrait tenter le coup en mettant

html { font-size: 10px; }
tablette
html { font-size: 9px }
Mobile
html { font-size: 8px; }

Cela fonctionnerait peut être. Je n'ai pas le temps de tester pour le moment, mais j'essayerai de le faire lorsque j’aurais un peu plus de temps.

perso je ne travaille pas avec les rem (cela dépend de chaque projet), car pas besoin pour l'instant, donc je ne suis pas d'une grande aide
cela n'est pas non plus lié à Template Creator CK, mais c'est une discussion intéressante

n'hésitez pas à partager vos trouvailles ici