부트 스트랩 3 버튼을 만드는 방법 텍스트 반응 형

Question

This Demo을 살펴보고 버튼 크기에 반응하는 버튼 내부의 텍스트를 어떻게 만듭니 까?

<div class="container"><div class="well"> 
    <button type="button" class="btn btn-default btn-lg btn-block">Make Me Responsive!</button> 
</div></div> 

데모에서 볼 수 있듯이 테스트 글꼴 크기 버튼은 창 크기 조정시 초기 시간과 동일하게 유지됩니다. 본문 요소를 사용하지 않고 id를 어떻게 업데이트 할 수 있는지 알려주십시오.

EXAMPLE HERE : 당신이 결과를 달성하기 위해 CSS를 @media 쿼리를 사용할 수 있지만

감사합니다,

Answer 1

, 당신은 또한 뷰포트의 폭에 따라 font-size를 지정하기 위해 vwViewport-percentage 길이를 사용할 수 있습니다

<button type="button" class="btn btn-default btn-lg btn-block responsive-width"> 
    Make Me Responsive! 
</button> 

.responsive-width { 
    font-size: 3vw; 
} 

,363,210

5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units

뷰포트 백분율 길이는 초기 함유 블록의 크기를 기준으로한다. 블록을 포함하는 초기 높이 또는 너비가 변경되면 그에 따라 배율이 조정됩니다. 그러나 루트 요소의 오버플로 값이 auto 인 경우 모든 스크롤 막대는 존재하지 않는 것으로 가정합니다. 블록 크기가 인 초기 값은 뷰포트에있는 스크롤 막대의 영향을받습니다. 초기 함유 블록의 폭의 1 % 이상

vw unit
.

vw 단위 is supported in the modern web browsers (IE9 + 포함)은 주목할 가치가 있습니다.

Answer 2

다른 해결책을 시도해 보았습니다. 여기에서 공유 :

<button type="button" class="enviaPedido btn btn-primary btn-sm"> 
    <span class="visible-xs-block">Pedido</span> 
    <span class="hidden-xs">Convertir en pedido</span> 
    </button>