Mise à l'échelle des polices en fonction de la largeur du conteneur dans Bootstrap

Question

Je me demande comment mettre à l'échelle un bloc de texte (avec mise à l'échelle des polices) dans Bootstrap Framework? La largeur des colonnes est la principale difficulté, car elle est fluide.

Answer 1

Bootstrap utilisation CSS @media pour le système de grille [link] vous pouvez donc utiliser des requêtes des médias avec les dimensions de Bootstrap pour définir un autre des propriétés CSS. Consultez le fiddle et redimensionnez la barre entre js et la fenêtre d'affichage pour voir l'effet de la modification de la taille de la police d'en-tête.

<div class="container"> 
 
    <h1 class="header">header</h1> 
 
    <div class="row"> 
 
    <div class="colDiv col-sm-6 col-md-4 col-lg-3"> 
 
     <p>ColumnA</p> 
 
    </div> 
 
    <div class="colDiv col-sm-6 col-md-8 col-lg-9"> 
 
     <p>ColumnB</p> 
 
    </div> 
 
    </div> 
 
</div>

EDIT:

ok alors j'ai écrit un peu petite fonction JS pour le faire. Vous définissez six paramètres (dans l'ordre) pour manipuler le fontSize:

alignFont(getElement,defaultSize,defaultWidth,acceleration,min,max) 

• getElement - élément mis la taille de police que vous souhaitez manipuler dans les
• DefaultSize - la valeur par défaut (démarrage) taille de la police
• defaultWidth - la largeur de la fenêtre pour laquelle le DefaultSize de police est définie
• accélération-1 est normal, 2 - augmenter deux fois plus vite, 0,5 - augmentation plus lente
• min - le minimum fontSize (la taille de la police ne peut pas être inférieure à cette valeur)
• max - le maximum fontSize (la taille de la police ne peut pas être supérieure à cette valeur)

et l'exemple (redimensionner la barre entre la boîte de js et zone d'affichage): FIDDLE

var a = document.getElementById('flexibleHeaderA'); 
 
    var b = document.getElementById('flexibleHeaderB'); 
 
    var c = document.getElementById('flexibleHeaderC'); 
 
    var d = document.getElementById('flexibleHeaderD'); 
 
    var e = document.getElementById('flexibleHeaderE'); 
 

 
    var settingA = alignFont.bind(this, a, 24, 600, 1, 20, 30); 
 
    var settingB = alignFont.bind(this, b, 24, 600, 1.5, 12, 60); 
 
    var settingC = alignFont.bind(this, c, 30, 600, 1, 15, 35); 
 
    var settingD = alignFont.bind(this, d, 22, 1000, .5, 12, 30); 
 
    var settingE = alignFont.bind(this, e, 16, 80, 1, 12, 26); 
 

 
    settingA(); 
 
    settingB(); 
 
    settingC(); 
 
    settingD(); 
 
    settingE(); 
 

 
    window.addEventListener('resize', function() { 
 
     settingA(); 
 
     settingB(); 
 
     settingC(); 
 
     settingD(); 
 
     settingE(); 
 
    }); 
 

 

 
    function alignFont(getElement, defaultSize, defaultWidth, acceleration, min, max) { 
 
     var cWidth = document.body.offsetWidth; 
 
     var newSize = (Math.pow(cWidth/defaultWidth, acceleration)) * defaultSize; 
 
     var limitSize = newSize >= max ? max : newSize <= min ? min : newSize; 
 
     getElement.style.fontSize = limitSize + "px"; 
 
    }

h3 { 
 
    border: dotted 1px #33aaff; 
 
    margin: 10px; 
 
    text-align: center; 
 
}

<h3 id="flexibleHeaderA">Hello I'm flexible header</h3> 
 
<h3 id="flexibleHeaderB">Hello I'm flexible header</h3> 
 
<h3 id="flexibleHeaderC">Hello I'm flexible header</h3> 
 
<h3 id="flexibleHeaderD">Hello I'm flexible header</h3> 
 
<h3 id="flexibleHeaderE">Hello I'm flexible header</h3>