rem et pixels

bg62bg62 Membres
août 2015 modifié dans Discussions
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

Réponses

  • JosJos Membres
    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).
  • bg62bg62 Membres
    août 2015 modifié
    Ok, merci à toi ;)
    et sur ce lien ce sont des ' em ' ....
    mais finalement : 93.7% correspond à quoi en pixels ???
    @+
  • JosJos Membres
    Par défaut, 1rem = 16px. 93.7% correspond à environ 15px.
  • bg62bg62 Membres
    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 :)
  • GzygGzyg Membres
    À 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
  • JosJos Membres
    C'est encore plus clair, merci.
  • bg62bg62 Membres
    ben du coup = pas pour moi = je rame encore plus car je suis toujours aves le
    [== CSS ==]
    html {
    	font-size: 93.7%;
    }
    
    @pluche ...
  • JosJos Membres
    C'est environ 15px sous Firefox
Connectez-vous ou Inscrivez-vous pour répondre.