基于Bootstrap中容器宽度的字体缩放

Question

我想知道如何在Bootstrap Framework中扩展一个文本块（使用字体缩放）？列的宽度是主要的难点，因为它是流动的。

Answer 1

Bootstrap使用CSS @media for Grid系统[link]，因此您可以使用具有Bootstrap维度的媒体查询来设置其他CSS属性。查看fiddle并在js和显示窗口之间调整栏的大小，以查看标题字体大小更改的效果。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

好的，所以我写了一个小小的JS函数来做到这一点。 您可以设置六个参数（按顺序）来操作fontSize：

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

• getElement - 将元素设置为您要在其中操作的字体大小
• defaultSize - 字体的默认（开始）大小
• defaultWidth - 设置了defaultSize字体的窗口宽度
• 加速 - 1是正常，2 - 增加两倍，.5 - 增加更慢
• min - 最小的fontSize（字体大小不能小于此值）
• max - 最大fontSize（字体大小不能高于此值）

示例（在js框和显示框之间调整栏的大小）：FIDDLE

＆＃13;

＆＃13;

    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";
    }

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;