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