눈 깜짝할 새에 미터를 뷰포트 너비 단위로 바꾸세요.

웹 디자인은 일반적으로 정확성과 유연성의 균형을 고려해야 합니다. 밀리미터 단위의 물리적 치수를 다양한 화면 크기에 맞춰 디지털 단위로 변환해 보신 적이 있다면, 얼마나 번거로운지 아실 겁니다. 저희 MM-VW 변환기를 사용하면 이러한 문제를 해결할 수 있습니다.

이것은 밀리미터(mm)를 뷰포트 너비(vw)로 즉시 변환하는 사용하기 쉬운 웹 기반 계산기입니다. 이를 통해 웹 디자이너, 웹 개발자 및 사용자 인터페이스 디자이너는 모든 보드에서 우아하게 확장 가능한 완벽하게 반응형 웹사이트를 제작할 수 있습니다.

MM-VW 컨버터란 무엇인가요?

MM-VW 변환기는 물리적 단위(밀리미터)를 효과적인 상대적 웹 디자인 단위(뷰포트 너비)로 변환해주는 작고 효율적인 도구입니다.

즉, 실제 세계의 측정값을 디지털 비율로 변환하는 데 도움이 되며, 이 디지털 비율은 화면이나 웹 브라우저의 창으로 자동으로 확대되거나 축소됩니다.

특히 데스크톱, 태블릿, 모바일 기기에서 시각적으로 비례적으로 표현되어야 하는 객체를 개발해야 할 때 매우 편리합니다.

단위에 대한 인식: MM 및 VW.

변환을 시도하기 전에 이러한 단위가 무엇이고 어떻게 다른지에 대한 개념을 갖는 것이 필요합니다.

밀리미터(MM)란 무엇인가?

밀리미터(mm)는 미터법 길이 단위입니다. 1미터의 1000분의 1만큼 작으며, 물리적 설계, 인쇄 및 제조에 널리 사용되어 정밀한 측정이 가능합니다.

일반적으로 명함의 너비는 최대 90mm입니다. 웹에서 사용하는 경우, 밀리미터 단위는 화면 크기에 정비례하지 않습니다(화면 크기와 해상도가 다르기 때문입니다).

뷰포트 너비(VW)란 무엇입니까?

VW(뷰포트 너비)는 웹 디자인 시 사용되는 상대적인 CSS 속성입니다.

1 VW는 브라우저 창의 너비와 같은 너비(백분율)입니다.

예를 들어:

• 1920px 폭의 화면에서 1 VW = 19.2px입니다.
• 하나의 VW는 375px 폭의 모바일 화면입니다.

즉, VW 유닛은 시청자의 화면에 따라 요소가 자동으로 크기가 조정되도록 보장하는 확실한 수단입니다. 이것이 VW 유닛이 디자인에 반응하는 이유입니다.

MM에서 VW로 변환하는 공식

밀리미터를 VW로 변환하는 과정은 뷰포트를 형성하는 픽셀과 인치당 픽셀 수(DPI 또는 PPI)에 따라 달라집니다. 변환의 일반적인 공식은 다음과 같습니다.

VW=(MM×96 / 25.4×뷰포트 너비(픽셀 단위))×100

여기서:

• 96 = 화면 픽셀 밀도(96 DPI)
• 25.4 = mm/인치.
• 뷰포트 너비 = 브라우저 창 너비에 모든 행 너비를 더한 값입니다.

뷰포트의 백분율인 밀리미터를 취했는지 확인하는 데 사용되는 공식입니다.

예: MM을 VW로 변환

간단한 예를 들어보겠습니다.

예:

1920px의 와이드 스크린에서 10mm로 VW를 재생하고 싶습니다.

다음 공식을 사용합니다.

폭스바겐 = ( 10 × 96 / 25.4 × 1920 ​) × 100

VW = ( 960 / 48768 ) × 100 

VW ≈ 1.97 VW

그래서, 1920px 화면에서 10mm ≈ 1.97 VW.

즉, width: 1.97vw;라고 쓰면 CSS에서 해당 구성 요소가 해당 디스플레이의 10mm 크기와 비슷해집니다.

MM에서 VW로의 컨버터 적용.

당사의 투시용 MM-VW 변환기는 간단한 설계로 제작되었습니다. 단기적인 효과를 얻으려면 다음 단계를 따라야 합니다.

1단계: 밀리미터 값으로 이동합니다.

밀리미터(MM) 필드에 변경하고자 하는 길이의 숫자를 입력하세요.

한 가지 예로, 디자인 구성 요소가 15mm일 때 15를 입력하는 경우가 있습니다.

2단계: 뷰포트 너비를 선택하거나 입력합니다.

뷰포트에 적용할 픽셀 크기를 입력합니다(그렇지 않으면 기본값은 데스크톱의 경우 1920, 노트북의 경우 1366, 모바일의 경우 375입니다).

이는 전환 결과가 올바른 화면에 표시되도록 하기 위한 것입니다.

3단계: 변환을 클릭하세요

해당 VW 값은 변환기의 도움으로 자동으로 계산되어 출력 필드에 표시됩니다.

4단계: 결과 복사

VW 값은 CSS 코드에 다음과 같이 입력해야 합니다.

• 너비: 2.5vw;

이제 귀하의 디자인 요소가 다양한 기기와 호환됩니다.

MM에서 VW로 변환 표(1920px 뷰포트)