1478 sujets

Web Mobile et responsive web design

Quelle unité choisir pour une taille de police responsive ?

Bonjour à tous et à toutes,

Sur un site ss prestashop, j'ai, dans l'entête, ajouté des div avec du texte.
Problème, si le thème choisi (le thème par défaut) est responsive, en revanche ce que j'ai ajouté ne l'est pas.
Et pour cause, j'avais mis des % comme taille de police et des pixels comme taille de div (hauteur et largeur).
Sur Internet, en cherchant quelle unité choisir pour que mon texte (et mes div) soient responsives, j'ai lu plusieurs articles (dont celui sur Alsacréations http://www.alsacreations.com/astuce/lire/12-police-font-taille-font-size-em.html).
Dans un article, la personne préconisait le vh et vw, sur un autre le rem et sur Alsacréations c'était plutôt le em.
Du coup, bah je ne sais vraiment pas quoi choisir Smiley rolleyes
C'est quoi la meilleure unité pour vous ?

Je sais pas pourquoi, mais je sens que ça va être un troll Smiley langue

Merci pour vos réponses.
Bonne journée à vous Smiley cligne
Bonjour Spip93, moi j'opterai plus pour le <em> car c'est extencible par rapport aux <px> ou aux <pt> mais je crois que les valeurs en % sont très bien et d'après moi c'est la meilleure manière de fixer la taille des choses car avec sa, le contenu de la page s'adapte facilement en fonction de la taille de l'ecran
a écrit :
mais je crois que les valeurs en % sont très bien et d'après moi c'est la meilleure manière de fixer la taille des choses

Je ne crois pas qu'on puisse indiquer la taille d'une police en %.

Pour le texte en général, je pense que le mieux est de ne pas trop y toucher : le texte qui est lisible sur un laptop doit être pouvoir aussi lisible sur un smartphone. On peut éventuellement fixer deux ou trois tailles de police via les media queries.

Par contre, effectivement, le problème peut se poser pour un titre dans un cadre, par exemple. La, évidemment, il faudrait que le texte s'adapte à la taille du cadre. Les unités viewport sont alors utiles, mais il y a intérêt à les faire précéder d'unités plus classiques (pixels, rem, em) pour les navigateurs qui ne supportent pas les vw.
#Thomas, desolé je me suis un peu planter. Lorsque je parlais d'utiliser les valeurs en % c'etait pour la taille des cadres (div, table, iframe, etc), j'ai oublié de preciser. La solution adequate est donc l'utilisation de <em>, et surtout ne pas oublier de mettre la balise <meta name="viewport"...> dans l'entete du document pour que les media query soient pris en compte
Administrateur
Bonjour,

Il est effectivement préconisé d'opter pour des tailles de polices, et donc des unités, fluides.

Les unités fluides à disposition sont :
- les % (qui fonctionnent très bien sur des polices mêmes si initialement pas vraiment prévues pour cela)
- les "em" (qui fonctionnent au final un peu comme les %, c'est à dire par rapport au parent)
- les "rem" (qui se rapportent à la taille de police de la racine <html>)
- les "vw" et "vh" (qui se rapportent à la largeur et hauteur de la fenêtre)

Ces derniers peuvent paraître très pratiques en responsive, mais demandent une très grande maîtrise pour ne pas devenir rapidement très petites (sur petit écran) et donc complètement inaccessibles. Ex. sur cette page : http://www.kiwi.gg/vw

Au final, et depuis quelques années, l'unité la plus pratique est le "rem" car elle possède tous les avantages des "em" sans la complexité des calculs ni la cascade entre chaque maillon de la chaîne.

Bon week-end Smiley cligne
Modifié par Raphael (07 May 2016 - 19:12)
Raphael a écrit :
- les "vw" et "vh" (qui se rapportent à la largeur et hauteur de la fenêtre)

Ces derniers peuvent paraître très pratiques en responsive, mais demandent une très grande maîtrise pour ne pas devenir rapidement très petites (sur petit écran) et donc complètement inaccessibles.

Ou démesurément grande sur un écran de grande définition, et ça on l'oublie trop souvent...
Merci beaucoup pour vos réponses.
Comme le préconise Raphael, et aux vues de la complexité des vh et vw, je pense que je vais opter pour l'unité rem.
Bonne journée à tous Smiley cligne
Raphael a écrit :

- les % (qui fonctionnent très bien sur des polices mêmes si initialement pas vraiment prévues pour cela)

Ah ok. J'avais à une époque désespérément tenter d'utiliser des polices en % sans succès. J'ai compris que pour que ça marche, il faut indiquer la taille de police dans tous les containers parents, jusqu'à l'objet HTML. Et si on écrit :

html, body { font-size: 100%;}

Pour avoir une police de taille plus grande dans un div, on doit alors écrire par exemple pour ce div :

font-size: 300%;

et là on a alors un très gros titre.
Avantage par rapport aux unités vh et vw : compatibilité avec tous les navigateurs, même les plus anciens, je crois.
Inconvénients ? Je ne sais pas ? peut être validation W3C ?
J'ai répondu un peu vite. Je viens de tester une police en % comme indiqué ci-dessus, et il semble que ce ne soit pas responsive. On obtient, effectivement, un gros titre, mais si on réduit la taille de la fenêtre, bin le texte ne change pas de taille et il finit par déborder de son cadre ...
Bonjour,
Thomas237 a écrit :
J'ai répondu un peu vite. Je viens de tester une police en % comme indiqué ci-dessus, et il semble que ce ne soit pas responsive. On obtient, effectivement, un gros titre, mais si on réduit la taille de la fenêtre, bin le texte ne change pas de taille et il finit par déborder de son cadre ...

Eh non, comme l'a précisé Raphaël, il s'agit d'un équivalent au em, i.e. que la police est relative par rapport à la taille de police du parent et non pas par rapport à une taille de cadre (seules les nouvelles unités "viewport" fonctionnent sur ce principe)
Bonsoir,

Alors, pour faire simple il est tout à fait possible d'utiliser une police en %, par exemple dans votre body vous mettez :

body {

font-size : 62.5%

}

Et ensuite, grace à ce petit machin vous pouvez utilisez les em.

1em = 10px

Essayez vous verrez.
Bonjour à tous et à toutes,

Excusez-moi, je reviens à la charge parce que j'ai un problème avec un autre site Internet (sur WordPress cette fois-ci) que je développe en local.
J'ai un footer qui est (plutôt) bien positionné sur mon écran.
J'ai voulu voir s'il l'était toujours sur une petite résolution d'écran (320x480).
Evidemment, ça n'était plus le cas. Il était au milieux au lieu d'être en bas.
Heureusement, il y a une "section" Responsive dans la feuille de style du thème. J'ai donc modifié le margin du footer à cet endroit, en mettant d'abord des % au lieu des px (en espérant que ça fonctionne sur d'autres résolutions)...
Voilà ce que ça donne :

footer {

		width: 100%;
        
		left: 0px !important;

		padding: 20px 0px 20px 0px;

		margin: 48% 0px 0px 0px;

		background: rgba(0,0,0,0.8);

		text-align: center;
}


Bon, comme c'était (maintenant) bien positionné en résolution 320x480, j'ai voulu voir sur d'autres résolutions (360x640 768x1024 800x1280...)...
Ah bah, j'ai vu... Plus la résolution augmente, plus mon Footer est haut sur la page Smiley bawling Smiley eek
En affichage Paysage, ça marche relativement bien mais en affichage Portrait, c'est la cata.

Comment faire pour que mon Margin prenne en compte de la hauteur de mon écran (quelle que soit la résolution et je dirais même l'orientation) ?

D'avance merci pour votre réponse.
Bonne journée à vous Smiley cligne

P.S : 2 précisions : certains (puristes) pourraient dire que comme je mets 
margin: 48% 0px 0px 0px;
je pourrais très bien mettre simplement 
margin-top: 48%;

c'est pas faux.
De plus, j'ai essayé avec l'unité rem et em à la place de %, mais j'ai le même effet.
Sujet clos
Aller à