반응 레이아웃 텍스트의 크기가 조정되지 않습니다.

반응 형 웹 디자인으로 웹을 만들려고하고 있지만 브라우저 창이없는 경우 텍스트 크기를 조정할 수 없습니다. 나는이 내 스타일 시트 및 HTML의 세그먼트 에단 마 코트반응 레이아웃 텍스트의 크기가 조정되지 않습니다.

의 책 '반응 형 웹 디자인을 "다음입니다 : 당신은 CSS3 미디어 쿼리를 사용하여 찾고

body { 
font-size: 100%; 
} 
#nav-bar { 
font-size: 1.0em; 
} 


<header> 
    <div id="nav-bar"> 
     <nav> 
      <ul> 
       <li><a href="">Item1</a></li> 
       <li><a href="">Item2</a></li> 
       <li><a href="">Item3</a></li> 
      </ul> 
     </nav> 
    </div> 
</header>

출처

2012-11-23 leojg

. 나는. 브라우저 폭이 < 980 픽셀 인 경우, 다음

body { 
    font-size: 100%; 
} 

#nav-bar { 
    font-size: 1.0em; 
} 

@media (min-width: 980px) 
{ 
    #nav-bar { font-size: 2em } 
}

가 빠른 개요 http://cssmediaqueries.com/what-are-css-media-queries.html를 참조 글꼴 크기에 ... 예를 들어

을 변경합니다.

출처

2012-11-23 01:11:43 Ted

네, 그게 해결책입니다. 하지만 뭔가 더 "부드러운"을 찾고 있는데 나는 글꼴이 창과 동시에 크기가 조정되도록 노력하고 있습니다. 나는 img로 그것을 할 수 있었다. 그러나 웬일인지 나는 텍스트로 기울어진다 :( – leojg

이 새로운 특성 즉, 예를 들어

1vw is 1% of the viewport width 
1vh is 1% of the viewport height 
1vmin is the smallest of 1vw and 1vh

, 브라우저의 뷰포트가 1,000 X 1,200 픽셀로 설정 가정, 뷰포트의 크기에 따라 글꼴 크기를 확장 할 수 있습니다 :

1.5vw = 15px font size 
1.5vh = 18px font size 
1.5vmin = min(1.5vw, 1.5vh) = 15px font size

새로운 유닛은 반응 형 디자인에 혁명을 일으킬 것입니다 -

출처 : http://www.sitepoint.com/new-css3-relative-font-size/

출처

2013-12-29 23:01:11 Roger

반응 레이아웃 텍스트의 크기가 조정되지 않습니다.

답변

관련 문제