Augmenter le font-size par rapport au width [Résolu]

Signaler
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021
-
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021
-
Bonjour, en fait après avoir fait quelque recherche sur certain site, j'ai trouvé quelque solution mais que ça ne marche pas ce qui m'a permis d'ouvrir ce sujet!
Alors voila! ce que je veux c'est simple: j'aimerais avoir la formule pour avoir le pourcentage du font-size par rapport au width lorsqu'on augmente ou diminue le resize du div.

Ce que je veux c'est quelque formule du genre:
font-size=width x (formule pour avoir le pourcentage du fontsize)
et que le résultat ressemble à quelque chose du genre:
Si le width=200px alors le font-size=12px
si le width=250px alors le font-size=15px
et ainsi de suite.

Voici quelque code que j'ai trouvé et que j'ai appliqué qui semble fonctionner un peu mais pas fonctionnel à 100% et que je ne comprend pas bien ce qu'il veut dire! :p et j'aimerais avoir un autre suggestion:


<script>
if ($(document).resize()) {
var currentSize1 = jQuery(this).css('font-size');
var currentSize1 = $("div").width()*(((100-4)/100));
jQuery(this).css('font-size', currentSize1);
}
</script>


Merci de votre collaboration :-)

1 réponse

Messages postés
32458
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
347
Bonjour,

Pourquoi n'utilises tu pas l'unité Viewport units (vw ou vh) au lieu de px ..
https://css-tricks.com/almanac/properties/f/font-size/#article-header-id-6

Par exemple
div {
    width: 100vw;
    height: 100vh;
    margin: auto;
    font-size: 50vw;
    text-align: center;
}



Cordialement, 
Jordane                                                                 
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021

Merci pour votre réponse, mais j'ai réussi à résoudre le problème avec quelque calcul sans utilisé l'unité vw. Voici comment j'ai procéder:

var surfaceInit=parseInt(150*42);

//taille actuel largeur et hauteur des elements
var widthCurrent=ui.originalSize.width;
var heightCurrent=ui.originalSize.height;

//taille resize largeur et hauteur des elements
var widthResize=ui.size.width;
var heightResize=ui.size.height;

var taille_new=5;

var surfaceResize= widthResize*heightResize;

//redimension hauteur et largeur et calcule de la nouvelle taille
if((widthResize > widthCurrent && heightResize > heightCurrent) || (widthResize < widthCurrent && heightResize < heightCurrent))
{
taille_new=parseInt(surfaceResize*16/surfaceInit);

ui.element.css("fontSize", parseInt(taille_new)+"px");

tab_obj_element[id_selected].taille_text=taille_new;
tab_obj_element[id_selected].color=color;
tab_obj_element[id_selected].background=bg;

/**
  • * on enregistre les modification */ saveElement(); }


Je marque cette discussion comme résolu! merci encore jordane et bonne continuation ;-)