장치 너비를 기준으로 한 글꼴 크기

Question

모든 너비 장치에서 모바일 사이트 렌더링이 잘되도록 장치 너비를 기준으로 글꼴 크기를 설정해야합니다. jquery 모바일을 사용하고 있습니다. 이것을 처리하나요?

Answer 1

html {font-size : 62.5 %; } body {font-size : 1em;}

@media (최대 너비 : 300px) { html {font-size : 70 %; } }

@media (최소 너비 : 500px) { html {font-size : 80 %; } }

@media (최소 너비 : 700px) { html {font-size : 120 %; } }

@media (최소 너비 : 1200px) { html {font-size : 200 %; } }

Demo : http://jsfiddle.net/pLyjt/ 

Answer 2

뷰포트. 데이비드 스토리로 작성자 : https://css-tricks.com/viewport-sized-typography/

예 :

#box{ 
 
    background-color:black; 
 
    width: 100vh; 
 
} 
 

 

 
h1.rad { 
 
text-align: center; 
 
vertical-align: middle; 
 
color: #999; 
 
font-family: "Helvetica Neue"; 
 
font-size: 3.14159vw; 
 
line-height: 6.66vh; 
 
font-weight: 100; 
 
text-transform: uppercase; 
 
}

<div id="box"> 
 
<h1 class="rad"> 
 
    Viewport sizing.<br>So rad. 
 
    </h1> 
 
    </div>