1485 sujets

Web Mobile et responsive web design

Bonjour

J'étais parti sur l'idée d'avoir une taille de 1 rem= 16 px pour les écrans "standarts ( 900 à 1300px environ). Et au-dela augmenter la taille à 18px par exemple et pour les plus petites (smartphones) la baisser à 14px.
Mais j'ai vu que certains au contraire augmentait la taille pour les petits écrans. Ce qui peut éviter de zoomer par exemple.

Alors je suis preneur de tout avis sur cette question.

Cordialement
Pour etre plus clair, je vais faire un petit rappel.
Quasiment tous les navigateurs prennent 16px comme taille de police par defaut , c'est pour cela qu' on met toujours dans le reset.css

body { 
   margin: 0;
   font-size:62.5%; 
}

Et donc si on met 1em dans le <div class="page"> ( un div qui englobe toute la page ) , donc la taille de ces elements enfants auront 10px de taille.( 16px * 62.5%)
Donc pour varier la taille il suffit de jouer avec les mediaquery

@media (max-width: 1024px) {  /*tablette*/ 
     div.page { 1.5em; }
}
@media (max-width: 748px) { 
     div.page { 1.8em; }
}
@media (max-width: 680px) {   /*mobile*/
     div.page { 2em; }
}

et du coup proportionelement la taille des polices vont varier suivant la resolution du navigateur
16 pixels est effectivement la taille de police par défaut sur la plupart des navigateurs, elle est aussi la taille recommandée pour le confort de lecture sur écran.

En pratique, pour la lecture des paragraphes, il est souvent conseillé une taille 14 pixels. C'est la raison pour laquelle cette taille règle la plupart des sites web, taille que l'on retrouve aussi dans les frameworks les plus en vu (Bootstrap et consorts).

J'ai énoncé la problématique en pixels, mais je vous suggère les valeurs relatives (em, rem...), qui permettront aux visiteurs de régler ses préférences utilisateur. Sur ce forum ils appellent ça "l'accessibilité" je crois Smiley cligne
Modifié par Olivier C (21 Nov 2014 - 18:48)