Sujet Précédent Sujet Suivant

Redimensionnement d'un texte font-size par rapport au div resizable

Résolu
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - Modifié le 15 janv. 2019 à 08:43
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 15 janv. 2019 à 12:27
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! :-).

1 réponse

Réponse 1 / 1
jordane45 Messages postés 37538 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 juin 2023 341
15 janv. 2019 à 08:46
Bonjour,

Regarde ceci :
http://marcj.github.io/css-element-queries/
0
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021
15 janv. 2019 à 09:03
Ouaou! quelle réponse rapide et efficace! c'est vraiment ce que je cherche! merci beaucoup Jordane pour ton lien magique!
0
jordane45 Messages postés 37538 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 juin 2023 341
15 janv. 2019 à 09:22
Je n'ai pas de mérite... je suis juste doué avec google.
:-)
0
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021
Modifié le 15 janv. 2019 à 12:07
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?
0
jordane45 Messages postés 37538 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 7 juin 2023 341
15 janv. 2019 à 12:16
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
0
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021
15 janv. 2019 à 12:27
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 ;-)
0
Rejoignez-nous