CSS 뷰포트 단위 vmin 및 vmax를 사용하여 화면 크기에 따라 행 높이를 조정하는 팁

CSS 뷰포트 단위인 vmin과 vmax를 사용하여 화면 크기에 따라 줄 높이를 조정하는 기술을 구현합니다.

요즘 모바일 기기의 보급률이 점점 높아지고 있어 사용자 경험을 향상시키기 위해 웹 디자인을 합니다. 반응성이 좋은 레이아웃이 필요합니다. 반응형 디자인을 할 때 흔히 접하게 되는 문제는 화면 크기에 따라 행 높이를 어떻게 조정하느냐 하는 것입니다. 다행스럽게도 CSS 뷰포트 단위 vmin 및 vmax가 이 목표를 달성하는 데 도움이 될 수 있습니다.

vmin 및 vmax 단위는 각각 뷰포트 너비 또는 높이를 기준으로 계산된 길이 단위 집합을 지정합니다. vmin은 뷰포트 너비와 높이 중 더 작은 길이 값을 지정합니다. vmax는 뷰포트 너비와 높이 중 더 큰 것을 참조하는 길이 값을 지정합니다.

여러 줄의 텍스트가 포함된 페이지가 있다고 가정해 보겠습니다. 뷰포트 너비나 높이가 변경되면 텍스트 줄 높이가 자동으로 조정됩니다. 다음은 구현 단계와 해당 코드 예제입니다.

먼저 기본 값을 설정해야 합니다. 뷰포트의 너비 또는 높이가 100vmin이면 행 높이가 1vmin으로 설정됩니다. 이러한 방식으로 뷰포트의 너비 또는 높이가 100vmin보다 작거나 같을 때 행 높이가 뷰포트의 너비 또는 높이를 초과하지 않도록 할 수 있습니다.

html, body {
height: 100%;
margin: 0;
padding: 0;
}

.container {
height: 100vh / 컨테이너 높이를 뷰포트 높이로 설정/
}

.text {
글꼴 크기: 1.5rem;
line-height: 1vmin; / 줄 높이를 1vmin으로 설정 /
}

다음으로 컨테이너에 여러 줄의 텍스트를 포함하고 높이를 설정할 수 있습니다. 컨테이너 텍스트가 컨테이너를 완전히 채울 수 있도록 뷰포트 높이를 설정합니다. 동시에 텍스트의 가독성을 보장하기 위해 텍스트의 글꼴 크기를 1.5rem으로 설정했습니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus vertibulum diam, quis commodo ipsum sagittis eu.

Nulla laoreet mollis nisi, id interdum mi commodo quis. Sed semper magna id vehicula pellentesque.

Nunc ex nibh, feugiat at 위의 코드로 화면 크기에 따라 행 높이를 조정하는 작업을 완료했습니다. 다양한 뷰포트 크기에서 텍스트의 줄 높이는 현재 뷰포트 크기에 따라 적절하게 조정됩니다.

vmin 및 vmax는 뷰포트 크기를 기준으로 계산되므로 이러한 단위를 사용할 때는 요소를 과도하게 확대하거나 축소하지 않도록 주의해야 합니다. 또한, 브라우저마다 뷰포트 크기를 계산하는 방법에 약간의 차이가 있을 수 있으므로 실제 사용 방법은 약간 다를 수 있습니다.

요약하자면 CSS 뷰포트 단위인 vmin과 vmax를 사용하면 화면 크기에 따라 줄 높이를 조정할 수 있어 편리합니다. 행 높이를 동적으로 조정함으로써 보다 유연하고 적응 가능한 반응형 디자인을 얻을 수 있습니다. 이 기술은 다양한 모바일 장치에서 사용자 경험을 향상시키고 웹 페이지가 다양한 화면 크기에 더 잘 적응할 수 있도록 해줍니다.

위 내용은 CSS 뷰포트 단위 vmin 및 vmax를 사용하여 화면 크기에 따라 행 높이를 조정하는 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html class margin padding viewport

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.