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

Messages postés
23
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
9 février 2019
-
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 :-)
Afficher la suite 

Votre réponse

1 réponse

Messages postés
24534
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 février 2019
362
0
Merci
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
23
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
9 février 2019
-
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 ;-)
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.