[Résolu] Fonts responsive... meilleure methode ?

Bonjour =)

Je suis nouveau dans le monde du responsive encore, et j'ai une question concernant la taille des polices d'ecriture.
Apres un sujet sur ce meme forum, je me suis mis a utiliser html { font-size: 62.5% } puis body { font-size: 1.6rem } et le reste en REM parce que je trouve ca tres pratique (si vous n'etes pas d'accord jusque la, dites le moi)
Puis en retrecissant mon navigateur, je realise que la taille reste la meme.

Premiere solution: reprendre un par un les tailles de police... bof.
Seconde solution (et ma question) : si je change la valeur de HTML (50% au lieu de 62.5 par exemple), du coup tout va changer en gardant les memes proportions ?
Quelle est la meilleure solution pour avoir des fonts responsive au fur et a mesure que la taille d'ecran se reduit ?

Merci =)

Bonjour,

LightBen a écrit :
je me suis mis a utiliser html { font-size: 62.5% } puis body { font-size: 1.6rem } et le reste en REM parce que je trouve ca tres pratique (si vous n'etes pas d'accord jusque la, dites le moi).

Bof pour l'unité "rem" sur body pour deux raisons :
1- elle est inutile. body { font-size: 1.6em } sera strictement identique
2- elle est moins bien supportée que "em", donc si tu l'appliques à body et qu'elle n'est pas reconnue, ta taille de police de base sera de... 10px

Bref, sur body il est préférable de choisir une unité en "em".
Pour le reste, les "rem" me vont très bien

LightBen a écrit :

Seconde solution (et ma question) : si je change la valeur de HTML (50% au lieu de 62.5 par exemple), du coup tout va changer en gardant les memes proportions ?

oui.

Merci t'es un chef

Bonjour

@raphael

je ne comprends pas trop ta réponse
ci-dessous un extrait de mon css
J'aurais donc tout faux?

Cordialement

car il est vrai que j'ai un peu de mal entre em et rem

html {
	font-size: 62.5%;   /* reset de 1 rem =10px (62.5% de 16px) */ 
}

body {
    background: url('../img/bg_body.png')repeat;
    color: #5A5A50;
    font-family: Georgia, "DejaVu Serif", Norasi, serif;
    font-size: 14px;
    font-size: 1.4rem;  /* taille de base équiv à 14px */
    line-height: 1.5;   /* soit 21px */

h1 	{ font-size: 28px; font-size: 2.8rem; line-height: 0.75;   margin-bottom: 21px; margin-bottom: 2.1rem;} /* =28px */
h2 	{ font-size: 21px; font-size: 2.1rem; line-height: 1;      margin-bottom: 21px; margin-bottom: 2.1rem;} /* =21px */
h3 	{ font-size: 16px; font-size: 1.6rem; line-height: 1.3125; margin-bottom: 0; 	margin-bottom: 0;	  } /* =16px */
h4 	{ font-size: 14px; font-size: 1.4rem; line-height: 1.5;    margin-bottom: 0; 	margin-bottom: 0;     } /* =14px */
h5 	{ font-size: 12px; font-size: 1.2rem; line-height: 1.75;   margin-bottom: 0; 	margin-bottom: 0;     } /* =12px */
h6 	{ font-size: 10px; font-size: 1.0rem; line-height: 2.1;    margin-bottom: 0; 	margin-bottom: 0;     } /* =10px */
}

cpalo a écrit :
J'aurais donc tout faux?

Non.
Simplement que "font-size: 1.4rem;" sur ton body est inutile et ne facilite pas les choses en terme de support.
Il te suffit de remplacer par "font-size: 1.4em;"

Je ne sais pas si j'ai bien compris ton probleme mais je vais repondre en esperant que ce soit ce que tu demandes :

EM = unite relative au parent
REM = pareil, mais relatif au PREMIER parent (REM = Root EM).

Si tu fais ca :
html { font-size: 62.5% }
body { font-size: 1.6rem }

C'est la meme chose que ca :
html { font-size: 62.5% }
body { font-size: 1.6em }

Car EM prend la valeur du parent : HTML est le parent de body.
REM prend la valeur source : HTML.

Donc, comme c'est la meme chose, Raphael m'a conseille d'utiliser EM sur le body au lieu de REM car c'est pas encore supporte autant que EM.
D'ailleurs ton post m'apporte quelque chose de bien (logique mais j'y avais pas pense) : tu mets d'abord 14px puis ensuite 1.4rem comme ca si le rem est pas reconnu il va pour sur se mettre sur la valeur en pixels... thanks

donc du coup, si tu fais ca :
html { font-size: 62.5% }
body { font-size: 1.6em }
div { font-size: 2rem }

la div prendra 2rem par rapport a la source, c'est a dire HTML, donc 20 pixels.
Par contre, si tu ecris ca :
html { font-size: 62.5% }
body { font-size: 1.6em }
div { font-size: 2em }

la div sera relative a son premier parent, c'est a dire body et non pas html. donc 2em de 1.6em c'est une sous division.

Bonjour

J'avais bien compris la différence pour les rem et les em ( pb du parent et de la cascade).
Mais je croyais que si on passait au rem, on n'abandonnait complètement l'em et je n'avais pas envisagé l'usage des deux unités en même temps.

Cordialement