Get best of the week

Police réactive. Adapter le texte entre la mise en page et les valeurs minimales

La police responsive ou responsive est le rêve de tout développeur Web. J'ai passé en revue de nombreuses options de mise en œuvre, je me suis assis le soir et j'ai trouvé une option de travail fiable. Je veux le partager avec toi. Bonus SCSS Mixin!


Donc le défi. Indiquez la valeur en fonction de la mise en page, ainsi que la valeur minimale à laquelle le texte ou le titre aurait fière allure sur les appareils mobiles, par exemple iPhone 5 (320 pixels). Dans ce cas, la police s'adapterait, augmentant ou diminuant selon la largeur de l'écran.

Nous prenons les valeurs initiales de la mise en page, par exemple, l'en-tête H1 avec une taille de 40px. Nous avons également besoin de la largeur de la mise en page de la toile entière, par exemple 1280 px.



Pour obtenir la valeur de police minimale, nous créons l'en-tête en fonction de la mise en page et, à l'aide des outils de développement Chrome (F12), sélectionnez la taille d'écran minimale souhaitée et sélectionnez la taille de police, en modifiant la valeur jusqu'à ce que le texte semble adéquat. J'ai obtenu 24px



après cela en CSS, au lieu de la taille de police: 40px; écrivez ce qui suit.

font-size: calc(24px + 16 * (100vw / 1280));

Lorsque 24 px est notre police minimale, 16 est la différence entre la police dans la mise en page 40 et la police minimale dans 24 (40-24 = 16). 100vw est la largeur actuelle totale de la fenêtre d'affichage (écran); 1280 est la largeur de la mise en page.

Nous testons et obtenons une police réactive qui correspond parfaitement à la taille de la mise en page.

Mais, à une taille de 320px, nous ne verrons pas le résultat souhaité, à savoir une police 24px. Cela est dû au fait que nous n'avons pas spécifié la taille d'écran minimale en 320px exactement.



Pour résoudre la situation, nous écrivons une demande média pour 767px, et à l'intérieur nous changeons la formule:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

Ici, nous soustrayons 320 pixels de la pleine largeur de la fenêtre d'affichage, ainsi qu'en ajoutant un nombre supplémentaire de 16, nous ajoutons 70% (16 + 16 * 0,7) .Nous

vérifions et voyons la pleine conformité avec la tâche! Dans le même temps, la transition vers le point d'arrêt se fait de manière transparente et non visible!

Bien sûr, nous pouvons fermer tout cela dans le mixage SCSS:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

Et connectez-vous comme suit:

h1{
 @include adaptiv-font(40, 24);
}


Vous pouvez complètement vous débarrasser de la requête média:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

Je serai heureux de lire dans les commentaires comment cette solution peut être améliorée autrement. Merci pour l'attention!

Basé sur des matériaux de la vidéo " Police adaptative. Un exemple de la mise en œuvre d'une police réactive (en caoutchouc) sur le mixage CSS + SCSS " Sur la chaîne YouTube " Freelancer for Life "

More articles:


All Articles