如何在 Bootstrap 框架中缩放文本块(使用字体缩放)?
列的宽度是主要的困难,因为它是流动的。
如何在 Bootstrap 框架中缩放文本块(使用字体缩放)?
列的宽度是主要的困难,因为它是流动的。
Bootstrap 将 CSS @media 用于网格系统 [链接],因此您可以使用带有 Bootstrap 尺寸的媒体查询来设置其他 CSS 属性。查看fiddle并调整 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)
以及示例(调整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>