Font responsiv, CSS Locks.

Valeurs en 'px' et 'breakpoint'

Le soucis de cette solution est que le rendu des polices n'est pas fluide et demandera de nombreuses modifications et de recalculs...

h1 {
	font-size: 24px;
	
		@media only screen and (min-width:640px) {
		font-size 32px; }
		
		@media only screen and (min-width:720px) {
		font-size 64px; }
		
		@media only screen and (min-width:1024px) {
		font-size 72px; }

}
									

Valeurs en 'vw' et 'breakpoint'

L'utilisation d'unités 'vw' dans le calcul de 'font-size' sera fluctuant entre les 'breakpoint'. Cela est du à la manière dont le navigateur calcul 'font-size'. Il calcul une valeur en pixel à partir d'une unité 'vw' en convertissant l'untité 'vw' en pourcentage comme suit:

h1 {
	font-size: 20vw;
	
		@media only screen and (min-width:640px) {
		font-size 12vw; }
		
		@media only screen and (min-width:720px) {
		font-size 10vw; }
		
		@media only screen and (min-width:1024px) {
		font-size 8vw; }

}

/* calcul */

vw unit = (viewportWidth/100) * vw value = px value

8vw = (1024/100) * 8 = 81.92px

									

CSS Locks.

Pour avoir une augmentation linéaire et prévisible du 'font-size' en fonction du viewport, nous alonns utiliser l'équation d'une droite pour effectuer le calcul de 'font-size'. L'équation d'une droite est:

y = mx + b

où:

y = font-size (axe vertical)

m = calcul de la pente 
(ajout de pixels à font-size pour chaque augmentation d'un 'px' de la largeur du viewport)

x = largeur viewport (axe horizontal)

b = taille de la police avant ajout de la valeur basée sur le viewport

									

Comme nous pouvons calculer l'intersection 'y' de la pente entre deux valeurs, nous pouvons calculer l'augmentation en 'px' à ajouter à 'font-size' à chaque augmentation d'1% du viewport (= 1px). Nous commençons par déterminer les deux valeurs statiques que sont 'm' et 'b'. Pour calculer 'm' (la pente), j'ai besoin de deux points soit quatre valeurs:

h1 {
		@media only screen and (min-width:640px) {
		font-size 32px; }
		
		@media only screen and (min-width:1024px) {
		font-size 72px; }
}

/* calcul */

m = augmentation de font-size / augmentation du viewport
m = (y2 - y1)  / (x2 - x1)
m = (72 - 32)  / (1024 - 640)
m =  40 / 384
m =  0.1041

									

Et maintenant calcul de 'b':

y = mx + b
b = y - mx

b = y - 0.1041x

b = (y1) - 0.1041 * (x1)
b = 32 - (0.1041 * 640)
b = -34.624

/* résultat */

y = 0.1041x + (-34.624)

									

Ne reste plus qu'a transformer notre fonction avec la syntaxe CSS:

font-size: calc(0.1041 * 100vw + (-34.364);

font-size: calc(10.41vw - 34.364px);


h1 {
	font-size: 24px;
	
		@media only screen and (min-width:640px) {
			h1 {font-size: calc(10.41vw - 34.364px); }
		 }
		
		@media only screen and (min-width:1024px) {
		font-size 72px; }

}

									

Voir la démo avec le code précédent:

Font Locks 01.[ GO! ]


Une autre manière de faire, par Trent Walton.

/* :root { font-size: #{$min_font}px; } */

:root {
  font-size: 16px;
}


/* @media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
  	:root { 
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * 
    				( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width})
    				));
  }
} */

@media (min-width: 400px) and (max-width: 1000px) {
  :root {
    font-size: calc( 16px + (24 - 16) * ( (100vw - 400px) / ( 1000 - 400) ));
  }
}


@media (min-width: 1000px) {
  :root {
    font-size: 24px;
  }
}



body {
  line-height: 1.6;
  font-family: 'PT Serif', serif;
  color: #333;
}

h1 {
  font-family: 'Rubik', sans-serif;
  font-size: 40px;
  line-height: 1;
  margin: 11vmin auto 12vmin;
  text-align: center;
}

.container p, .container h2 {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

									

Font Locks 02.[ GO! ]



Retour à l'index. [ go ]

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