Div 크기에 따라 글꼴 크기를 동적으로 조정하는 방법은 무엇입니까?

Div 크기에 따라 글꼴 크기 조정

div가 9개의 상자로 구성되고 가운데 상자에 텍스트가 포함된 시나리오에서 , 전체 페이지와 일관된 비율을 유지하려면 글꼴 크기를 동적으로 조정하는 것이 바람직합니다.

Div 내의 텍스트 크기 조정

이를 달성하려면 태그:

body {
  font-size: calc(1.25vmin + 1.25vmax);
}

교차 해상도 호환성

다양한 해상도를 수용하기 위해 여러 CSS 미디어 쿼리를 활용하는 대신 글꼴을 자동으로 조정하는 다음 CSS3 스타일을 사용하는 것이 좋습니다. 화면 기준 크기 width:

@media (min-width: 50px) { body { font-size: 0.1em; } }
@media (min-width: 100px) { body { font-size: 0.2em; } }
// ...and so on, with incrementing width thresholds...
@media (min-width: 1700px) { body { font-size: 3.6em; } }

설명

• vmin 단위는 뷰포트 높이 또는 너비의 최소 백분율을 나타냅니다.
• vmax 단위는 뷰포트 높이 또는 너비의 최대 백분율을 나타냅니다.
• 이 공식을 사용하면 글꼴 크기는 뷰포트 높이와 너비 중 더 작은 크기에 비례하여 조정되어 다양한 화면 크기에서 일관된 텍스트 비율을 보장합니다.

위 내용은 Div 크기에 따라 글꼴 크기를 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!