Redimensionnement d'un texte font-size par rapport au div resizable [Résolu]

Messages postés
23
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
9 février 2019
-
Bonjour et bonne Année à tous :-) ! après avoir fait plusieurs recherches sans succès sur internet, je me permet de postuler cette forum pour solliciter votre aide.
Voila mon problème, en fait j'ai un texte qui s’agrandit par rapport au fenêtre, mais ce que j'aimerais faire c'est plutôt que mont texte s'agrandit par rapport à mon div resizable! voici mon code
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>

</head>
<body>

<div class="flexFont">
    This is FlexText:<br>Autoscaling by DIV width
</div>

<script>
flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.01;
        divs[i].style.fontSize = relFontsize+'vw';
  
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};
</script>

EDIT : Ajout des balises de code



Comme vous le voyez le window.onload et window.onresize permet d'agrandir mont font-size par rapport au fenêtre mais ce que je veux c'est quand ont modifie le div avec le menu resize souligner en rouge alors la valeur du font-size varie on fonction du menu resize et non en fonction du fenêtre! merci de votre aide! :-).
Afficher la suite 

Votre réponse

1 réponse

Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
362
0
Merci
Bonjour,

Regarde ceci :
http://marcj.github.io/css-element-queries/
rasielblas
Messages postés
23
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
9 février 2019
-
Ouaou! quelle réponse rapide et efficace! c'est vraiment ce que je cherche! merci beaucoup Jordane pour ton lien magique!
jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
362 -
Je n'ai pas de mérite... je suis juste doué avec google.
:-)
rasielblas
Messages postés
23
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
9 février 2019
-
J'ai un autre question, à ce que je vois quand on redimensionne la largeur du div alors la hauteur augmente en même temps avec la largeur, ce que j'aimerais c'est qu'on puisse modifie la largeur seulement quand on augmente le width et même chose pour le height, et que le zone de texte soit editable c'est possible?? une idée?
jordane45
Messages postés
24593
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 février 2019
362 -
width signifie largeur .. et height;. hauteur... donc je ne comprends pas vraiment ta question.

Je ne comprend pas non plus pourquoi la hauteur augmenterait automatiquement en même temps que tu élargis ta div....
Quel code utilises tu ? Qu'as tu écris exactement ?

Ensuite, pour ce qui est de pouvoir rendre l'élément éditable... tu peux avec, justement, le contenteditable
https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contenteditable

Par contre... nouvelle question = ouverture d'une nouvelle discussion.... sinon on ne s'y retrouve plus.
Merci.

Et pense à mettre celle-ci en résolue (via l'icone de roue crantée à droite du titre de ta question).

N'oublie pas non plus d'utiliser les balises de code pour nous poster ton code : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
rasielblas
Messages postés
23
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
9 février 2019
-
Excuse moi! j'ai mal formulé ma question mais je crois que tout est en ordre! pour le contenu éditable c'est bien aussi ce que j'ai voulu c'est tous ce que j'ai besoin pour le moment! pour d'autre question je vais ouvrir un nouveau sujet je vais mettre celle-ci en résolu! encore merci ;-)
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.