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

Question

I wonder how to scale a block of text (with font-scaling) in Bootstrap Framework? Width of columns is the main difficulty, because it's fluid.

Answer 1

Bootstrap use CSS @media for Grid system [ link ] so you can use media queries with Bootstrap's dimensions to set another CSS properties. Check out the fiddle and resize the bar between js and display window to see the effect of header font-size changing.

 <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 so I wrote a little little JS function to do that. You set six parameters (in order) to manipulate the fontSize:

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

• getElement - set element the font-size you want to manipulate within
• defaultSize - the default (start) size of font
• defaultWidth - the width of window for which the defaultSize of font is set
• acceleration - 1 is normal, 2 - increase two times faster, .5 - increase slower
• min - the minimal fontSize (the font size cannot be smaller than this value)
• max - the maximal fontSize (the font size cannot be higher than this value)

And the example (resize the bar between js box and display box) : 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>