基於Bootstrap中容器寬度的字體縮放

Question

我想知道如何在Bootstrap Framework中縮放文本塊（使用字體縮放）？ 列寬是主要困難，因為它是可變的。

Answer 1

Bootstrap將CSS @media用於Grid系統[ 鏈接 ]，因此您可以使用具有Bootstrap尺寸的媒體查詢來設置其他CSS屬性。 檢查小提琴並調整js和顯示窗口之間的欄的大小，以查看更改標題字體大小的效果。

 <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> 

編輯：

好的，所以我寫了一點JS函數來做到這一點。 您可以設置六個參數（依次）來操縱fontSize：

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

• getElement-設置元素要在其中操作的字體大小
• defaultSize-字體的默認（開始）大小
• defaultWidth-設置了字體的defaultSize的窗口的寬度
• 加速度 -1正常，2-加快兩倍，.5-緩慢
• min-最小fontSize（字體大小不能小於此值）
• max-最大fontSize（字體大小不能大於此值）

和示例（調整js框和顯示框之間的欄的大小） ： 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>