Augmenter le font-size par rapport au width

Résolu

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - Modifié le 17 janv. 2019 à 07:16
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 23 janv. 2019 à 06:32

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 :-)

A voir également:

Javascript font size
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Javascript excel - Forum Javascript / DHTML

1 réponse

Réponse 1 / 1

jordane45 Messages postés 37547 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 juin 2023 341
Modifié le 17 janv. 2019 à 09:54

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

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021
23 janv. 2019 à 06:32

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 ;-)

Discussions similaires

java.lang.IndexOutOfBoundsException: Index: 0, Size: 0

Partie entiére d'un nombre

Redirection par header ou javascript?

Taille d'un JPanel

Que vaut sizeof(long) ?

est-ce que "goto" existe en javascript ?

Votre réponse

Discussions similaires