28172 sujets

CSS et mise en forme, CSS3

PX > EM > REM

Bonjour =)

Je suis en train de me mettre au RWD, et je passe naturellement par la case font-size.

Comme tout le monde, j'étais aux pixels.
Je me suis mis aux EM.
Je viens de découvrir les REM et je veux l'adopter.

Seul problème: je mets quoi dans l'attribut HTML ?

Dans ma tête c'était ça :
body { font-size: 16px; } p { font-size: 1.2rem }

Mais je vois sur Internet des articles (comme ici: http://snook.ca/archives/html_and_css/font-size-with-rem ) avec ça par exemple :
html { font-size: 62.5%; } p { font-size: 1.2rem }

>> pourquoi ?

Donc du coup je suis pas sur d'avoir tout compris...
Dois-je mettre une valeur de base dans HTML ou dans BODY, cette valeur de base peut elle être en pixels ou être en valeur relative, etc...

Pour mon problème personnel :
Comment dois-je écrire dans mon code pour avoir une base de 16px et gérer en REM par la suite, et que le tout soit adapté pour du RWD ?

Merci =)
Modifié par LightBen (12 Sep 2013 - 19:24)
La valeur de base en %, c'est le % de la configuration du PC (chaque ordinateur a sa propre configuration par défaut des caractères). L'utiliser permet à ceux ayant réglé leur ordinateur pour avoir une grande police de continuer à en avoir une. Après, ça complique forcément pour régler les tailles, vu qu'elles dépendront de la configuration individuelle (un peu comme la taille des divs en % quoi ^^)
Administrateur
La différence entre % et em sur l'élément body (ou html ? Je ne sais plus de tête...) est la conséquence d'un double bug d'IE :

1/ l'usage des em (ou pourcentage peu importe) dans la page plutôt que des px est dû à un "bug" (réglage par défaut) d'IE lorsqu'on zoome.

2/ mais un autre bug dans ces mêmes IE fait que si on utilise des em sur body ou html alors le bug ci-dessus se déclenche quand même... mais pas avec les pourcentages.

Pour ne pas déclencher ce bug, il faut donc à la fois :
- uniquement un pourcentage (ou rien donc 100% = 1em) sur body ou html
- une unité "vraiment" relative sur les enfants donc soit % soit em (on préfère en général em mais ce n'est qu'une préférence)

rem n'est pas compris par IE8 et moins. Les Media Queries non plus, certes.
Si je dois m'occuper d'un fallback dans IE8 et moins (et je dois le faire pour tous mes projets) et que ce sont des em (c'est si facile quand on a une méthode éprouvée et que le graphiste est pas complètement jeté), je vais pas m'emm... à tout faire en em ET rem (ou en em par défaut mais en rem dans les blocs @-MQ) vu que si j'enlève rem ça ne change rien...
Modifié par Felipe (13 Sep 2013 - 16:26)
Compris !! Smiley smile

Dernière question : y a-t-il une valeur préférée pour la valeur de base dans body html? Parce que j'aurais naturellement 100% mais je vois souvent 62,5 ou des valeurs du genre...
La taille du texte par défaut dans les navigateurs est de 16px. En appliquant un font size de 62.5% sur l'élément html tu te retrouve avec une taille de base de 10px (62.5 % de 16 = 10) qui est pratique pour calculer les tailles en em.


html {
font-size: 62.5%
}

body {
font-size: 1.4em /* equivalent à 14pixels */
}


Tu vois le truc ?
J'ai compris. C'est génial Smiley langue

En gros
html 62.5% car 16px est par defaut et on met la valeur a 10px pour calculer aisement,
body 1.4rem pour mettre 14px ou 1.6rem pour 16px, etc.

Etant donne que c'est l'enfant direct de html, em fera la meme chose.
Et rem a certains problemes de compatibilite.

J'ai tout compris =) Happy

Merci a vous =)
Modifié par LightBen (15 Sep 2013 - 14:18)
Sujet clos
Aller à