부트 스트랩의 컨테이너 너비를 기준으로 한 글꼴 크기 조정

Question

부트 스트랩 프레임 워크에서 텍스트 블록을 어떻게 확장하는지 궁금합니다. 유동적이기 때문에 기둥의 폭이 가장 큰 난제입니다. 그리드 시스템에 대한

Answer 1

부트 스트랩 사용 CSS의 @media [link] 그래서 당신은 다른 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) 

• getElement - 설정 요소는
• defaultSize 내에서 조작 할 글꼴 크기 - 기본 (시작) 글꼴 크기
• defaultWidth - font의 defaultSize가 설정된 창 너비
• 가속도 - 최소 fontSize는
• 최대 (폰트 크기를이 값보다 작게 할 수 없음) - -
• 분 느리게 증가 - 0.5이 빠르게 두 번 증가 - 1 (2), 정상 최대 FIDDLE
  ,691 : fontSize는

그리고 예 (JS 박스와 디스플레이 박스의 크기를 조정 줄) (폰트 크기가이 값보다 높을 수 없다)

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>