Font responsiv.

Intro.

Bon, ici je pose tout ce qui m'a parut pertinent d'explorer en CSS pour utiliser les fonts le plus 'responsivement' parlant. Alors oui, y a des contradictions avec d'autres articles, comme celui de Chris Coyier qui voit les choses autrement. Bref, à chacun d'expérimenter et de se faire son propre code ! Et pour les plus mordus, y a plein de bonnes discutions sur le sujet se trouvant sur GitHub !

Do not ever do this! selon Florens Verschelde.
Peut-être que selon le contexte on soit obligé
d'en passer par là...
/*
 * Redefine the rem value while keeping it proportional.
 * Useful values, with default font-size of 16px:
 *  62.5% -> 1rem = 10px, .1rem  = 1px
 * 125%  -> 1rem = 20px, .05rem = 1px
 */
html { font-size: 62.5%; }

ou bien:

:root { font-size: 16px; }

/* ################ */

/*
 * With default user settings:
 *  0.625rem = 10px
 *  1.25rem  = 20px
 *  2.5rem   = 40px
 */
 
 /* valeur par défaut d'un rem = 16px sauf si l'utilisateur à
 modifier ses préférences dans son navigateur et surtout sur
 les appareils mobiles. Donc si la valeur par défaut n'est plus la
 même, les calculs seront sûrement faussés... */
 
h1 { font-size: 1.25rem; }

@media (min-width: 320px) {
  h1 { font-size: calc( 3.125vw + .625rem ); }
}

@media (min-width: 960px) {
  h1 { font-size: 2.5rem; }
}

tout ça est clair, mais comme Moz indique
qu'il faut utiliser des em et non des px
pour les tailles d'écrans...
320px = 20em et 960px = 60em ouf ! ça tombe juste...

@media (min-width: 20em) {
  h1 { font-size: calc( 3.125vw + .625rem ); }
}

@media (min-width: 60rem) {
  h1 { font-size: 2.5rem; }
}
/* ################ calcul ############### */
pourcentage = (montant partiel / montant total) x 100

@media (min-width: 320px) {
  h1 { font-size: calc( 3.125vw + .625rem ); }
}							  				+ 1.6px

								

Ze la suite...



Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/11/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11