조정 CSS 글꼴 크기

Question

내가 보이는

font-size: 5vw; 

같은 것을 사용하는 경우 그래서 나는 자동으로 용기의 크기에 따라 크기를 조정할 텍스트 ... 그러나

이 좋아,하지만 내가 페이지를 축소하면 높이가 너무 작아지기 시작한다.

어쨌든 vh와 vw를 기반으로 텍스트의 크기를 조정할 수있다. 예를 들어, 페이지의 너비를 줄이면 나도 줄어들지 않니?

내가 만 페이지의 폭을 줄일 경우처럼, 나는

기본적으로 내가 텍스트가 항상 완벽 상자 안에 맞게 원하는 같은이 .. 텍스트의 높이가 동일하고 그 반대의 경우도 마찬가지을 유지하려면 비율은 페이지/컨테이너의 크기에 관계없이 무엇입니까?

어쨌든 vh 및 vw에서 CSS/html로 기본 글꼴 크기를 지정 하시겠습니까?

감사합니다.

Answer 1

vmin 및 vmax 단위를 살펴볼 수 있습니다. 1vw 뷰포트 폭의 1 %를 반환하고 1vh 뷰포트 높이의 1 %를 반환되지만

는 (이것은 하나 뷰포트 폭 (vw) 또는 신장 될 vh을 작은 뷰포트 치수의 1 %를 반환). 마찬가지로 1vmax은 가장 큰 뷰포트 차원 중 1 %를 반환합니다.

텍스트를 포함하여 전체 컨테이너를 가로 세로 비율을 유지하려면 컨테이너 크기와 글꼴 크기에 동일한 종류의 단위를 적용해야합니다.

는 전체 페이지 모드에서 다음 예를 참조하고 창 너비와 높이로 놀러 : 인터넷 익스플로러 (11)과 에지 (12)는하지 않습니다

p { 
 
    width: 80vmin; 
 
    font-size: 6vmin; 
 
}

<p>Try resizing both the width and height of the output frame. The &lt;p&gt; element and its contents will both respond to whichever dimension is the smallest.</p>

주 vmax 단위를 지원합니다. 브라우저 지원에 대한 자세한 내용은 here입니다.