L'échelle des polices fondées sur la largeur du conteneur

j'ai du mal à me faire à l'échelle des polices.

j'ai actuellement ce site avec un corps font-size de 100%. 100% de quoi? Cela semble calculer à 16px.

j'avais l'impression que 100% se référerait d'une façon ou d'une autre à la taille de la fenêtre du navigateur, mais apparemment pas parce que c'est toujours 16px si la fenêtre est redimensionnée vers le bas à une largeur mobile ou un bureau grand écran soufflé.

Comment puis-je faire le texte à l'échelle de mon site par rapport à son conteneur? J'ai essayé d'utiliser em , mais ça non plus.

mon raisonnement est que des choses comme mon menu deviennent squished quand vous redimensionnez, donc je dois réduire le px font-size de .menuItem entre autres éléments en relation avec la largeur du conteneur. (Par exemple dans le menu sur un grand bureau, 22px fonctionne parfaitement. Passez à la largeur de la tablette et 16px est plus approprié.)

je suis conscient que je peux ajouter des points d'arrêt, mais je veux vraiment que le texte soit à l'échelle en plus d'avoir des points d'arrêt supplémentaires, sinon je vais finir avec des centaines de points d'arrêt pour chaque diminution de 100px dans la largeur pour contrôler le texte.

843
demandé sur Pang 2013-04-17 13:37:18

30 réponses

EDIT: si le conteneur n'est pas le corps CSS trucs couvre toutes vos options ici: https://css-tricks.com/fitting-text-to-a-container /

Si le conteneur est le corps, ce que vous cherchez est Viewport pourcentage des longueurs :

les viewport-percentage lengths sont relatifs à la taille de la initiale contenant le bloc . Lorsque la hauteur ou la largeur du bloc contenant initial est modifié, ils sont mis à l'échelle en conséquence. Cependant, lorsque la valeur de débordement sur l'élément racine est automatique, les barres de défilement sont censés ne pas exister.

les valeurs sont:

  • vw (% de la largeur du viewport)
  • vh (%de la hauteur du viewport)
  • vi (1% de la taille du viewport dans la direction de l'axe en ligne de l'élément racine)
  • vb (1% de la taille du viewport dans la direction de l'axe du bloc de l'élément racine)
  • vmin (le plus petit de vw ou vh )
  • vmax (le plus grand ou vw ou vh )

1 v* est égal à 1% de la première contient un bloc.

l'utiliser ressemble à ceci:

p {
    font-size: 4vw;
}

comme vous pouvez le voir, lorsque la largeur du viewport augmente, la taille de la police augmente aussi, sans avoir besoin d'utiliser les requêtes médias.

ces valeurs sont une unité de dimensionnement, tout comme px ou em , de sorte qu'elles peuvent être utilisées pour dimensionner d'autres éléments aussi bien, comme la largeur, la marge ou le rembourrage.

le soutien de navigateur est assez bon, mais vous aurez probablement besoin d'un repli, tel que:

p {
    font-size: 16px; 
    font-size: 4vw;
}

vérifier les statistiques de soutien: http://caniuse.com/#feat=viewport-units .

aussi, consultez CSS-trucs pour un regard plus large: http://css-tricks.com/viewport-sized-typography /

voici un bel article sur le réglage des tailles min/max et l'exercice d'un peu plus de contrôle sur les tailles: http://madebymike.com.au/writing/precise-control-responsive-typography /

et voici un article sur le paramétrage de votre taille à l'aide de calc() afin que le texte remplisse le viewport: http://codepen.io/CrocoDillon/pen/fBJxu

également, s'il vous plaît voir cet article, qui utilise une technique appelée "FONTEN leading" pour ajuster la ligne-hauteur ainsi. https://css-tricks.com/molten-leading-css /

1206
répondu jbenjohnson 2018-06-29 15:41:48

Mais si le conteneur n'est pas de la fenêtre d'affichage (corps)?

cette question est posée en commentaire par Alex sous la réponse acceptée.

ce fait ne signifie pas que vw ne peut pas être utilisé dans une certaine mesure pour la taille de ce conteneur. Maintenant, pour voir une variation du tout il faut supposer que le conteneur est d'une certaine manière flexible dans la taille. Que ce soit par un pourcentage direct width ou en étant 100% moins les marges. Point devient "moot" si le conteneur est toujours réglé à, disons, 200px large--alors il suffit de définir un font-size qui fonctionne pour cette largeur.

exemple 1

avec un conteneur de largeur flexible, il faut toutefois se rendre compte que, d'une certaine manière, le conteneur est toujours en cours de calibrage hors du viewport . À ce titre, il s'agit d'ajuster un réglage vw basé sur ce qui suit: différence de taille en pourcentage par rapport au viewport, ce qui signifie qu'il faut tenir compte du dimensionnement de l'emballage parent. prendre cet exemple :

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw; 
}

en supposant ici que le div est un enfant du body , il est 50% de ce 100% largeur, qui est la taille de viewport dans ce cas de base. Fondamentalement, vous voulez mettre un vw qui va être bon pour vous. Comme vous pouvez le voir dans mon commentaire dans les css ci-dessus, vous pouvez "penser" à travers que mathématiquement en ce qui concerne la taille de viewport complet, mais vous ne besoin pour le faire. Le texte va "flex" avec le conteneur, parce que le conteneur fléchit avec le viewport redimensionnement. Mise à jour: voici un exemple de deux conteneurs de tailles différentes .

exemple 2

vous pouvez aider à assurer viewport dimensionnement par forçant le calcul basé sur ça. considérons cet exemple :

html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50% 
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw 
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw; 
}

le dimensionnement est toujours basé sur le viewport, mais est essentiellement mis en place sur la base de la taille du conteneur lui-même.

doit être modifié dynamiquement...

si le dimensionnement de l'élément de réservoir finit par changer de façon dynamique son rapport en pourcentage soit via @media points de rupture ou par javascript, alors quelle que soit la "cible" de base, il faudrait Recalculer pour maintenir la même "relation" pour la taille du texte.

prendre L'exemple n ° 1 ci-dessus. Si le div était commuté en 25% largeur par @media ou javascript, alors en même temps, le font-size devrait ajuster dans la requête de médias ou par javascript au nouveau calcul de 5vw * .25 = 1.25 . Ce serait la taille du texte à la même taille, il serait la " largeur "du conteneur d'origine 50% a été réduite de moitié par rapport au dimensionnement de viewport, mais elle a maintenant été réduite en raison d'une modification de son propre calcul de pourcentage.

Un Défi

avec la fonction CSS3 calc() 1519410920" en cours d'utilisation, il serait difficile de régler dynamiquement, car cette fonction ne fonctionne pas pour les besoins font-size en ce moment. Donc tu ne pouvais pas faire un réglage CSS3 pur si votre largeur change sur calc() . Bien sûr , un ajustement mineur de la largeur pour les marges peut ne pas être suffisant pour justifier tout changement dans font-size , donc il peut ne pas être important.

258
répondu ScottS 2018-08-25 10:22:13

Ce que je fais dans un de mes projets est un "mélange" entre vw et vh pour ajuster la taille de la police à mes besoins, par exemple.:

font-size: calc(3vw + 3vh);

je sais que cela ne répond pas à la question de l'op, mais peut-être que cela peut être une solution pour n'importe qui d'autre.

24
répondu lsblsb 2016-03-11 08:36:58

Solution avec SVG:

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

https://jsfiddle.net/qc8ht5eb /

23
répondu Danto 2015-07-27 15:17:02

il y a une grande philosophie pour cette question. La chose la plus facile à faire serait de donner une certaine taille de police au corps (je recommande 10), et alors tous les autres éléments auraient leur police en em ou rem. Je vais vous donner un exemple pour comprendre ces unités. Em est toujours relatif à son parent

body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */

Rem est toujours relatif au corps

body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */

et que vous pourriez créer un script qui modifierait la taille de police relative à votre conteneur largeur. Mais ce n'est pas ce que je conseillerais. Parce que dans un conteneur de largeur 900px par exemple, vous auriez un élément p avec une police de taille 12px disons. Et sur votre idea qui deviendrait sur conteneur de largeur 300px à 4px font-size. Il y a une limite inférieure. Une autre solution serait avec les requêtes médias, de sorte que vous pourriez définir la police pour différentes largeurs.

Mais les solutions que je recommande est d'utiliser une librairie javascript qui vous aide à que. Et fittext.js que j'ai trouvé jusqu'à présent.

21
répondu Dan Ovidiu Boncut 2014-09-17 13:20:15

mis à jour parce que j'ai eu un vote négatif.

Voici la fonction:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

convertissez ensuite toutes les tailles de police des éléments enfant de vos documents en em's ou %.

ajoutez alors quelque chose comme ça à votre code pour définir la taille de la police de base.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt /

20
répondu tnt-rox 2014-09-23 08:46:51

Pure-solution CSS avec calc() , unités CSS et math

ce N'est précisément pas ce que demande OP, mais peut faire la journée de quelqu'un. Cette réponse n'est pas facile à nourrir et nécessite quelques recherches dans developer end.

je suis finalement venu pour obtenir une solution pure-CSS pour ceci en utilisant calc() avec des unités différentes. Vous aurez besoin d'une compréhension mathématique de base des formules pour élaborer votre expression pour calc() .

quand j'ai compris cela, j'ai dû obtenir un en-tête répondant pleine page largeur avec quelques parents rembourrage peu dans le DOM. Je vais utiliser mes valeurs ici, les remplacer par les vôtres.

aux mathématiques

Vous aurez besoin de:

  • ratio bien ajusté dans certains viewport, j'ai utilisé 320px, donc j'ai obtenu 24px haut et 224px large donc ratio est de 9.333... ou 28 / 3
  • la largeur du conteneur, j'ai eu padding: 3em et la pleine largeur donc cela est arrivé à 100wv - 2 * 3em

X est la largeur du conteneur alors remplacez-le par votre propre expression ou ajustez la valeur pour obtenir le texte pleine page. R est le ratio que vous aurez. Vous pouvez l'obtenir en ajustant les valeurs dans certains viewport, en inspectant la largeur et la hauteur de l'élément et en les remplaçant par vos propres valeurs. Aussi, il est width / heigth ;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

et bang! Il a travaillé! J'ai écrit

font-size: calc((75vw - 4.5rem) / 7)

à mon en-tête et il s'est bien ajusté dans chaque viewport.

mais comment ça marche?

il nous faut des constantes ici. 100vw signifie la pleine largeur de viewport, et mon but était d'établir l'en-tête pleine largeur avec du rembourrage.

le rapport. Obtenir une largeur et une hauteur dans un viewport m'a obtenu un ratio pour jouer avec, et avec ratio je sais quelle hauteur devrait être dans l'autre largeur de viewport. Les calculer avec la main prendrait beaucoup de temps et au moins prendre beaucoup de bande avec donc ce n'est pas une bonne réponse.

Conclusion

je me demande pourquoi personne n'a compris cela et certaines personnes disent même que cela serait impossible à bricoler avec CSS. Je n'aime pas utiliser Javascript pour ajuster les éléments, donc je n'accepte pas les réponses JS ou même jQuery sans creuser plus. Dans l'ensemble, il est bon que l'a compris et c'est une étape à la mise en œuvre pure-CSS dans la conception de site web.

Je m'excuse de n'importe quelle convention inhabituelle dans mon texte, Je ne suis pas le locuteur natif en anglais et aussi tout à fait nouveau à l'écriture ainsi réponses.

Edit : il convient également de noter que nous avons evil scrollbars dans certains navigateurs. Par exemple, lors de L'utilisation de Firefox j'ai remarqué que 100vw signifie la pleine largeur de viewport, s'étendant sous scrollbar (où le contenu ne peut pas s'étendre!), de sorte que le fullwidth texte doit être soigneusement marginé et de préférence être testé avec de nombreux navigateurs et appareils.

14
répondu hegez 2018-04-20 00:58:23

ce n'est peut-être pas très pratique, mais si vous voulez que la police soit une fonction directe du parent, sans avoir de JS qui écoute/boucle(intervalle) pour lire la taille de la div/page, il y a un moyen de le faire. Iframes. Tout ce qui est dans l'iframe considérera la taille de l'iframe comme la taille du viewport. Donc, l'astuce est de simplement faire une iframe dont la largeur est la largeur maximale que vous voulez que votre texte, et dont la hauteur est égale à la hauteur maximale * le texte de l'aspect ratio.

en mettant de côté la limitation que les unités de viewport ne peuvent pas aussi venir avec les unités de parent côté texte (comme dans, ayant la taille % se comportent comme tout le monde), les unités de viewport fournissent un outil très puissant:être capable d'obtenir la dimension min/max. Tu ne peux pas faire ça ailleurs , tu ne peux pas le dire..faites que la hauteur de cette div soit la largeur du parent * quelque chose.

cela étant dit, le truc est d'utiliser vmin, et de définir la taille iframe de sorte que [fraction] * la hauteur totale est une bonne taille de police lorsque la hauteur est la dimension limite, et [fraction] * la largeur totale lorsque la largeur est la dimension limite. C'est pourquoi, la hauteur doit être un produit de la largeur et le ratio d'aspect.

pour mon exemple particulier, vous avez

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0,0,0,0);
  border-style: none;
  transform: translate3d(-50%,-50%,0);
}

Le petit ennui avec cette méthode est que vous devez définir manuellement le CSS de l'iframe. Si vous joignez tout le fichier CSS, cela prendrait beaucoup de la bande passante pour de nombreuses zones de texte. Donc, ce que je fais est d'attacher la règle que je veux directement de mon CSS.

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText); 

vous pouvez écrire une petite fonction qui obtient la règle CSS / toutes les règles CSS qui affecteraient la zone de texte.

Je ne peux pas penser à une autre façon de le faire sans avoir un peu de vélo/écoute JS. La vraie solution serait pour les navigateurs de fournir un moyen d'adapter le texte en fonction du conteneur parent ET de fournir également le même vmin/vmax fonctionnalité de type.

js fiddle: https://jsfiddle.net/0jr7rrgm/3 / (cliquez une fois pour verrouiller le carré rouge à la souris, cliquez à nouveau pour libérer)

la plupart des JS dans le violon est juste ma fonction de click-drag personnalisé

13
répondu Roman Rekhler 2015-04-13 15:04:09

il y a une façon de faire sans javascript!

vous pouvez utiliser un svg en ligne. Vous pouvez utiliser css sur une svg si elle est en ligne. Vous devez vous rappeler que l'utilisation de cette méthode signifie que votre svg va répondre à sa taille du récipient.

essayez la solution suivante...

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE 0</text>

  </svg>

</div>

CSS

div {
  width: 50%; /* set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;

}

exemple: https://jsfiddle.net/k8L4xLLa/32 /

vous voulez quelque chose de plus voyant?

SVG vous permettent également de faire des choses fraîches avec des formes et des rebuts. Découvrez ce cas d'Utilisation grande pour le texte évolutif...

https://jsfiddle.net/k8L4xLLa/14 /

13
répondu Aaron Loften 2018-03-13 15:48:49

utilisant vw , em & co. ça marche, mais l'imo a toujours besoin d'une touche humaine pour s'ajuster.

voici un script que je viens d'écrire basé sur @TNT-rox' réponse qui tente d'automatiser le toucher de cet humain:

$('#controller').click(function(){
	$('h2').each(function(){
    var
      $el = $(this),
      max = $el.get(0),
      el = null
    ;
    max =
      max
    ? max.offsetWidth
    : 320
    ;
    $el.css({
      'font-size': '1em',
      'display': 'inline',
    });
    el = $el.get(0);

    el.get_float = function(){
      var
        fs = 0
      ;
      if (this.style && this.style.fontSize) {
        fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '' ));
      }
      return fs;
    };

    el.bigger = function(){
      this.style.fontSize = (this.get_float() +0.1) +'em';
    };


    while ( el.offsetWidth < max ) {
      el.bigger();
    }
    // finishing touch.
    $el.css({
      'font-size': ((el.get_float() -0.1) +'em'),
      'line-height': 'normal',
      'display': '',
    });
	});  // end of ( each )
});	// end of ( font scaling test )
div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

il réduit la taille de la police à 1em puis commence à augmenter de 0,1 jusqu'à ce qu'il atteigne le maximum largeur.

jsFiddle

7
répondu WoodrowShigeru 2017-08-06 12:54:38

100% est relatif à la taille de la police de base, qui si vous n'avez pas paramétré, il serait par défaut de l'utilisateur-agent du navigateur.

pour obtenir l'effet que vous recherchez, j'utiliserais un morceau de javascript pour ajuster la taille de la police de base par rapport aux dimensions de la fenêtre.

6
répondu scoota269 2013-04-17 09:42:36

à l'intérieur de votre CSS essayez d'ajouter ceci en bas en changeant la largeur de 320px pour l'endroit où votre conception commence à se casser:

    @media only screen and (max-width: 320px) {

       body { font-size: 1em; }

    }

donnez ensuite la taille de police dans "px" ou "em" comme vous le souhaitez.

6
répondu Chunky 2013-08-01 11:30:31

avez-vous essayé http://simplefocus.com/flowtype / ?

C'est ce que j'utilise pour mes sites et a fonctionné parfaitement. Espérons que cela aide.

6
répondu Pixel Reaper 2013-11-08 22:21:49

vous cherchez quelque chose comme ça? =>

http://jsfiddle.net/sijav/dGsC9/4/

http://fiddle.jshell.net/sijav/dGsC9/4/show/

J'ai utilisé flowtype et ça marche très bien (cependant c'est js et pas une solution CSS pure)

$('body').flowtype({
 minFont : 10,
 maxFont : 40,
 minimum : 500,
 maximum : 1200,
 fontRatio : 70
});
6
répondu Sijav 2013-11-10 11:33:05

ma propre solution, basée sur jQuery, fonctionne en augmentant progressivement la taille de la police jusqu'à ce que le conteneur obtient une grande augmentation de la hauteur (ce qui signifie qu'il a obtenu une rupture de ligne). C'est assez simple mais qui fonctionne assez bien et il est très facile à utiliser. Vous n'avez pas besoin de savoir quoi que ce soit sur la police utilisée, tout est pris en charge par le navigateur.

vous pouvez jouer avec sur http://jsfiddle.net/tubededentifrice/u5y15d0L/2 /

le la magie se produit ici:

var setMaxTextSize=function(jElement) {
    //Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData,fontSize);

    //Gradually increase font size until the element gets a big increase in height (ie line break)
    var i=0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size",""+(++fontSize)+"px");
    }
    while(i++<300 && jElement.height()-previousHeight<fontSize/2)

    //Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize-=1;
    jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");

    return fontSize;
};
6
répondu Vincent 2015-03-26 16:35:38

ce composant Web modifie la taille de la police de manière à ce que la largeur du texte interne corresponde à la largeur du conteneur. Vérifiez la Démo .

Vous pouvez l'utiliser comme ceci:

<full-width-text>Lorem Ipsum</full-width-text>
6
répondu pomber 2016-10-30 14:52:22

mon problème était similaire, mais lié à la mise à l'échelle du texte dans un en-tête. J'ai essayé Fit Font mais j'ai dû basculer le compresseur pour obtenir des résultats, car il résolvait un problème légèrement différent, comme le flux de texte. Donc j'ai écrit mon propre petit plugin qui réduit la taille de la police pour s'adapter au conteneur, en supposant que vous avez overflow: hidden et white-space: nowrap de sorte que même si la réduction de la police au minimum ne permet pas de montrer le cap complet, il coupe juste ce qu'il peut montrer.

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });

  };

})(jQuery);
5
répondu Aram Kocharyan 2015-12-19 01:40:46

j'ai préparé la fonction d'échelle simple en utilisant CSS transform au lieu de la taille de police. Vous pouvez l'utiliser à l'intérieur d'un conteneur, vous n'avez pas à définir des requêtes de média etc :)

billet de Blog: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header /

le code:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

démo de travail: https://codepen.io/maciejkorsan/pen/BWLryj

5
répondu Maciej Korsan 2017-03-07 11:03:32

regardez mon code il fait le font size smaller à fit n'importe quoi là-bas

mais je pense que cela ne conduit pas à une bonne expérience utilisateur

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    //display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
    $(this).css({"whiteSpace":"nowrap","display":"inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

result

espère que cela vous aider à

3
répondu Basheer AL-MOMANI 2017-03-16 09:10:01

toujours avoir votre élément avec cet attribut:

Javascript: element.style.fontSize = "100%";

ou

CSS: style = "font-size: 100%;"

lorsque vous passez en mode plein écran, vous devriez déjà avoir une variable échelle calculée (échelle > 1 ou échelle = 1). Puis, en plein écran:

document.body.style.fontSize = (scale * 100) + "%";

ça marche bien avec du petit code.

2
répondu marirena 2016-09-19 20:19:32

comme solution de repli JavaScript (ou votre seule solution), vous pouvez utiliser mon plugin jQuery Scalem , qui vous permet de dimensionner par rapport à l'élément parent (conteneur) en passant l'option reference .

2
répondu thdoan 2017-01-05 07:33:30

dans le cas où il est utile à n'importe qui, la plupart des solutions dans ce fil ont été envelopper le texte en plusieurs lignes, forme E.

mais j'ai trouvé ça, et ça a marché:

https://github.com/chunksnbits/jquery-quickfit

exemple d'usage:

$('.someText').quickfit({max:50,tolerance:.4})

2
répondu pk1557 2017-06-14 06:26:23

Essayez d'utiliser fitText plugin, causer de la Fenêtre d'affichage des tailles n'est pas la solution de ce problème. Il suffit d'ajouter bibliothèque

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script>

et changer la taille de police pour corriger par les paramètres le coefficient de texte:

$("#text_div").fitText(0.8);

vous pouvez définir les valeurs MAX ET min du texte:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });
2
répondu dsb 2017-07-06 14:39:18

pour dynamic text , ce plugin est très utile http://freqdec.github.io/slabText / . Il suffit d'ajouter css

.slabtexted .slabtext
    {
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
    }
.slabtextinactive .slabtext
    {
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
    }
.slabtextdone .slabtext
    {
    display: block;
    }

et script

$('#mydiv').slabText();
2
répondu pajouk 2017-10-17 07:22:34

pour adapter la taille de police à son conteneur, plutôt que la fenêtre Voir la fonction resizeFont() que j'ai partagée dans cette question (une combinaison d'autres réponses, dont la plupart sont déjà liées ici). Il est déclenché par window.addEventListener('resize', resizeFont); .

Vanilla js: redimensionner font-awesome to fit container

JS:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

vous pourriez peut-être utiliser vw/vh comme un repli, donc vous assignez dynamiquement les unités em ou rem en utilisant javascript, en s'assurant que les polices de caractères sont à l'échelle de la fenêtre si javascript est désactivé.

appliquer la classe .resize à tous les éléments contenant du texte que vous souhaitez mettre à l'échelle.

déclenche la fonction avant d'ajouter la fenêtre redimensionner l'écouteur d'événements. Ensuite, tout texte qui ne correspond pas à son conteneur sera réduit lorsque la page se charge, ainsi que lorsqu'il est redimensionné.

NOTE: la valeur par défaut font-size doit être définie à em , rem ou % pour obtenir des résultats appropriés... et si le style de vos éléments est trop complexe, alors le navigateur pourrait se planter si vous commencez à redimensionner frénétiquement la fenêtre.

2
répondu Joshua Flood 2017-11-08 14:27:41

cela a fonctionné pour moi:

j'essaie d'approcher la taille de police en fonction d'une largeur/hight obtenue en définissant la taille de police:10px. Fondamentalement, l'idée est "si j'ai une largeur de 20px et une hauteur de 11px avec une taille de police: 10px, alors quelle serait la taille de police max pour calculer un conteneur de 50px largeur et 30px hauteur?"

, La réponse est un double de la proportion système:

{ 20:10=50:X, 11: 10=30: Y} = { X= (10 * 50) / 20, Y= (10*30)/11 }

maintenant X est une taille de police qui va correspondre à la largeur, Y est une taille de police qui va correspondre à la hauteur; prendre la plus petite valeur

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)el_w = 0;

    //0.5 is the error on the measure that js does
    //if real measure had been 12.49 px => js would have said 12px
    //so we think about the worst case when could have, we add 0.5 to 
    //compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

NB: l'argument de la fonction doit être un élément de portée ou un élément qui est plus petit que son parent, sinon si les enfants et le parent ont les deux la même fonction largeur / hauteur échouera

2
répondu Maurizio Ricci 2018-01-12 21:11:19

Je ne vois pas de réponse en ce qui concerne la propriété CSS flex, mais elle peut être très utile aussi.

1
répondu Smart Coder 2018-07-27 17:34:26

les requêtes médias droites semblent être une solution beaucoup plus simple et plus compréhensible pour redimensionner une police basée sur des tailles de conteneur qui peuvent être dynamiques.

ci-dessous redimensionne la police à la taille du conteneur, que le conteneur soit adapté à la taille du viewport, ou s'il a atteint sa valeur max. Si vous avez des conteneurs non larges à 100%, Vous pouvez ajuster le vw en conséquence.

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}
0
répondu Justin Krause 2018-09-11 14:49:27

utiliser les Variables CSS

personne n'a encore mentionné les variables CSS, et cette approche a fonctionné le mieux pour moi, donc:

disons que vous avez une colonne sur votre page qui est 100% de la largeur de l'écran d'un utilisateur mobile, mais a un max-width de 800px, donc sur le bureau Il y a de l'espace de chaque côté de la colonne. Mettez ceci en haut de votre page:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

Et maintenant, vous pouvez utiliser cette variable (au lieu de vw l'unité) pour définir la taille de votre police. Par exemple:

p {
  font-size: calc( var(--column-width) / 100 );
}

ce n'est pas une approche pure CSS, mais c'est assez proche.

0
répondu Joe 2018-10-09 10:04:35

si le problème est que la police devient trop grande sur le bureau écran large, je pense que la méthode css la plus facile serait quelque chose comme ceci (en supposant wrapper max 1000px large)

.specialText{
    font-size:2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width:24px;
    }
}

donc il est auto dimensionné pour n'importe quel écran plus petit que la largeur maximale de votre conteneur, et la taille fixe quand l'écran est plus large (comme pratiquement tous les ordinateurs de bureau/portables)

-1
répondu Xeridea 2016-06-28 04:34:28