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

1 réponse

jordane45 Messages postés 38195 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mai 2024 344
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;
}



0
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 ;-)
0
Rejoignez-nous