PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 10/08/2015 17:27:59

bg62
Membre
Inscription : 18/05/2007
Messages : 1 779
Site Web

rem et pixels

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

Dernière modification par bg62 (10/08/2015 17:50:09)


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#2 11/08/2015 15:17:01

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : rem et pixels

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).

Hors ligne

#3 11/08/2015 16:07:33

bg62
Membre
Inscription : 18/05/2007
Messages : 1 779
Site Web

Re : rem et pixels

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

Dernière modification par bg62 (11/08/2015 16:09:15)


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#4 11/08/2015 16:17:29

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : rem et pixels

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

Hors ligne

#5 11/08/2015 16:34:00

Gzyg
Membre
Inscription : 25/09/2006
Messages : 836
Site Web

Re : rem et pixels

http://ethanmarcotte.com/fontsizing/ (en)
http://www.pompage.net/traduction/css-unites-et-usages (fr)
http://www.pompage.net/traduction/dimen … s-avec-rem (fr)

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


à plus,

Gzyg

Dernière modification par Gzyg (11/08/2015 16:38:52)

Hors ligne

#6 11/08/2015 17:09:43

bg62
Membre
Inscription : 18/05/2007
Messages : 1 779
Site Web

Re : rem et pixels

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 smile


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#7 11/08/2015 22:06:20

Gzyg
Membre
Inscription : 25/09/2006
Messages : 836
Site Web

Re : rem et pixels

À 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. smile


à plus,

Gzyg

Hors ligne

#8 12/08/2015 10:33:56

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : rem et pixels

C'est encore plus clair, merci.

Hors ligne

#9 12/08/2015 12:10:27

bg62
Membre
Inscription : 18/05/2007
Messages : 1 779
Site Web

Re : rem et pixels

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

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

@pluche ...


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#10 12/08/2015 13:55:54

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : rem et pixels

C'est environ 15px sous Firefox

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés