rem et pixels

bg62 · août 2015

bonjour;)
dans le thème par défaut,( plucss.css ) nous avons ceci :

[== CSS ==]
html {
	font-size: 93.7%;
}

pour une future personnalisation dans theme.css, quels sont les "équivalents" des valeurs de pixels en 'rem' ou en ' % ' ???
exemple:

[== CSS ==]
html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

... sur un exemple trouvé au hasard du Net ...
j'ai trouvé également ceci :
offroadcode.com/prototypes/rem-calculator/
mais ce convertisseur démarre avec une valeur donnée en ... pixels ...
@+
bg

Jos · août 2015

Bonjour,

Peut-être ce site va pouvoir t'aider à y voir plus clair.

http://pxtoem.com/

Je vais revoir d'ici peu les tailless des polices de PluCSS (en conservant l'unité rem).

bg62 · août 2015

Ok, merci à toi

et sur ce lien ce sont des ' em ' ....
mais finalement : 93.7% correspond à quoi en pixels ???
@+

Jos · août 2015

Par défaut, 1rem = 16px. 93.7% correspond à environ 15px.

Gzyg · août 2015

http://ethanmarcotte.com/fontsizing/ (en)
http://www.pompage.net/traduction/css-unites-et-usages (fr)
http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem (fr)

px, em et rem sont dans un bateau...

à plus,

Gzyg

bg62 · août 2015

ok, je peux donc prendre ceci comme base de travail:
8px = 0.5rem
9px = 0.5625rem
10px = 0.625rem
11px = 0.6875rem
12px = 0.75rem
13px = 0.8125rem
14px = 0.875rem
15px = 0.9375rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
22px = 1.375rem
24px = 1.5rem
26px = 1.625rem
28px = 1.75rem
30px = 1.875rem
32px = 2rem
34px = 2.125rem
36px = 2.25rem
38px = 2.375rem
40px = 2.5rem

???
@pluche

Gzyg · août 2015

À condition de définir une base pour le "r" de rem (r = root) : c'est-à-dire une taille en % pour la balise html (habituellement 62.5% correspondant à environ 10pixels) à partir de laquelle tes futures tailles en rem seront calculées.

html {font-size: 62.5%;}

puis, par exemple :

h1 {font-size: 3rem;} (soit 3x62.5% de la taille du pixel selon l'écran car tous les pixels ne sont pas équivalents, ce serait trop simple et c'est pourquoi % + rem apparaissent comme une solution "globalement" satisfaisante).

Prend exemple sur le framework knacss qui est en pointe (entre autre) sur ce sujet.

à plus,

Gzyg

Jos · août 2015

C'est encore plus clair, merci.

bg62 · août 2015

ben du coup = pas pour moi = je rame encore plus car je suis toujours aves le

[== CSS ==]
html {
	font-size: 93.7%;
}

@pluche ...

Jos · août 2015

C'est environ 15px sous Firefox

rem et pixels

Réponses