부트 스트랩 타이포그래피 및 글꼴 크기가 변경되지 않음

<BODY> 
<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
    <div class="navbar-header col-xs-3 col-md-3"> 
     <a class="navbar-brand" href="#">My Brand</a> 
    </div> 
    <div class="col-xs-9 col-md-9"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</div> 
</nav> 
</BODY>

이것은 탐색 모음이며 일반 텍스트를 작성했습니다. 나는 해상도를 바꿀 때 글꼴 크기가 바뀔 것으로 예상했다. 그러나 글꼴 크기는 항상 동일하게 유지됩니다. 해상도 또는 화면 크기가 변경되면 자동으로 글꼴 크기를 어떻게 변경할 수 있습니까? - 두 윈도우 크기 및 폰트 크기 변경 http://codepen.io/panchroma/pen/stBnj 부트 스트랩 타이포그래피 및 글꼴 크기가 변경되지 않음

폰트 뷰포트 또는 윈도우의 크기에 직접 비례하여 크기를 조절하는 것이 가능하다 :

출처

2014-07-12 Jay

여기 미디어 쿼리를 사용하여 하나의 가능성이다. 이 방법은 지금은 거의 사용되지 않는 경향이 있습니다. 화면 크기가 매우 커지거나 작아지는 결과를 제어하기가 더 어렵습니다. 모든 현대의 브라우저는 2 년 전의 경우가 아닌 지금 미디어 쿼리를 이해합니다.

특정 경우에 사용 가능한 공간을 채우기 위해 텍스트를 축척하는 모든 종류의 옵션을 찾을 수 있습니다 (예 : http://fittextjs.com).

행운을 빈다.

CSS 것은

@media (max-width: 480px) { 
    .navbar li a{ 
    font-size:14px; 
    } 
} 

@media (min-width: 481px) and (max-width: 767px) { 
    .navbar li a{ 
    font-size:20px; 
    } 
} 

@media (min-width: 768px) and (max-width: 979px) { 
    .navbar li a{ 
    font-size:26px; 
    } 
} 

@media (min-width: 980px) { 
    .navbar li a{ 
    font-size:30px; 
    } 
}

출처

2014-07-12 10:48:06

예, 현재 나는이 방법을 사용하고 있습니다. 감사. – Jay

해상도가 480px 미만인 모바일을 보았으므로 가능한 가장 작은 크기 (해상도)는 무엇입니까? – Jay

@ user2554706 CSS에서 허용해야하는 가장 작은 화면에 대해 옳고 그른 대답이 있는지 확신 할 수 없지만 이러한 결정은 디자인의 세부 사항을 기반으로합니다. 나는 보통 전체 창보기로 시작한 다음 스쿼시를 시작합니다. 화면상의 레이아웃이 붕괴되기 시작하면 새로운 MQ를 작성하여 레이아웃을 수정합니다. 개인적으로 320px 이하의 뷰포트에서 내 디자인이 완벽하지는 않지만 너무 걱정하지 않아도됩니다. –

부트 스트랩 타이포그래피 및 글꼴 크기가 변경되지 않음

답변

관련 문제