뷰포트 너비를 뷰포트 높이로 빠르게 변환합니다.

웹사이트도 유연성을 통해 쉽게 제작되었습니다. VW에서 VH로 변환기 우리가 만든 것은 작업 간의 간단한 교환을 용이하게 할 것입니다. 뷰포트 너비(VW) 그리고 뷰포트 높이(VH) 개발자와 디자이너가 함께하는 단위. 모바일 레이아웃, 태블릿 레이아웃, 데스크톱 레이아웃 등 원하는 레이아웃을 최적화해야 하나요? 이 도구를 사용하면 어떤 화면에서든 시행착오나 계산 시간 낭비 없이 원하는 디자인이 정확하게 표시되도록 보장할 수 있습니다.

이 기능을 사용하면 VW 값을 VH로 빠르게 변환하고(또는 그 반대로도) 페이지와 히어로, 전체 화면 개체의 비율이 균형 잡히도록 할 수 있습니다.

VW(뷰포트 너비)란 무엇인가요?

VW 뷰포트 너비 CSS로 약칭합니다 폭스바겐.

이는 브라우저 뷰포트 너비의 1%를 목표로 하는 상대적 측정값입니다. 뷰포트 너비는 브라우저에서 웹 페이지에 표시되는 영역의 너비입니다.

예를 들어:

• 1vw = 뷰포트 너비의 1%
• 100vw = 전체 뷰포트의 크기.

웹 브라우저 크기가 조절됨에 따라 다양한 크기의 요소를 자동으로 제공하는 기능 덕분에 반응형 웹 디자인에 유용합니다. 디자이너들은 VW를 다음과 같은 용도로 자주 사용합니다.

• 화면 크기에 맞춰 반응하는 동적인 글꼴을 개발하세요.
• 배너나 컨테이너의 너비를 표시하세요.
• 두 개 이상의 장치에서도 동일합니다.

VW는 작은 휴대전화나 4K 디스플레이에 잘 균형 잡힌 미적 레이아웃을 표시할 수 있도록 허용합니다.

VH(뷰포트 높이)란 무엇인가요?

뷰포트 높이 브라우저의 1퍼센트 창 높이는 다음과 같이 약칭됩니다. 브이에이치.

예를 들어:

• 1vh = 뷰포트 높이의 1%
• Vh = 전체 뷰포트의 높이.

VH는 또한 생성의 경우에도 도움이 됩니다. 전체 화면 페이지, 페이지를 열거나 영웅 이미지, 모든 기기의 디스플레이에서 세로 부분을 차지할 것으로 예상됩니다. 이를 통해 레이아웃이 스마트폰의 세로 화면이나 모니터처럼 다양한 화면 비율을 지원할 수 있게 됩니다.

VH의 일반적인 용도는 다음과 같습니다.

• 구간의 높이(높이: 100vh;)
• 둘 중 하나를 다른 하나와 함께 공급합니다.
• 모달 반응성이나 중첩의 형성.

VW에서 VH로 변환하는 공식:

VW와 VH는 다양한 차원(폭과 높이)을 기반으로 하기 때문에 회전과 후진에는 정보가 필요합니다. 너비와 높이에 관하여 기존 뷰포트의 관계입니다. 관계는 간단합니다.

VH 값 = VW 값 × 뷰포트 너비 / 뷰포트 높이

또는 반대로:

VW 값 = VH 값 × 뷰포트 높이 / 뷰포트 너비

계산 예

너비가 1440픽셀, 높이가 900픽셀이라고 가정해 보겠습니다.

50vw를 VH로 변환하고 싶습니다.

VH = 50 × 1440 / 900​ VH = 50 × 1.6 = 80vh

그래서, 1440×900의 경우 50vw는 80vh와 같습니다. 뷰포트.

이는 특정 크기에서 뷰포트 크기의 절반이 뷰포트 높이의 80%를 차지한다는 것을 의미합니다.

VW에서 VH로 변환기 사용법(단계별).

번거로움 없는 변환 과정을 보장하기 위해, 저희 VW-VH 변환기는 매우 빠르고 정확하며 번거로움 없이 변환되도록 설계되었습니다. 다음의 간단한 단계를 따라주세요.

1단계: 도구 열기

열려 있는 VW에서 VH로 변환기 페이지 및 열기 툴스메이트 온라인 페이지.

2단계: 값 입력

VW로 변환하려는 숫자(예: 25vw)를 VW 입력 상자에 입력합니다.

3. 뷰포트 치수 제공(선택 사항)

뷰포트 너비와 높이 (픽셀 단위) 가능한 한 명확해야 합니다. 이 값은 도구가 VW와 VH의 정확한 비율을 도출하는 데 도움이 됩니다.

4단계: 즉각적인 결과 얻기

세부 정보가 입력되면 변환기가 자동으로 해당 세부 정보를 표시합니다. 브이에이치 가치. 또한 양방향으로 운전할 수 있어서, 한쪽은 VH로, 다른 한쪽은 VW로 운전할 수 있습니다.

5단계: CSS에 적용

이 내용을 CSS에 복사하여 붙여넣으세요. 이제 반응형 디자인이 기기 크기에 관계없이 완벽한 비율을 유지할 것입니다.