rem, rm, px 및 vw 간의 변환

1. vw px rem em이란 무엇입니까

1. vw/vh: 상대적인 뷰포트 너비 또는 높이입니다. 100vw는 전체 화면 너비와 같고 100vh는 다음과 같습니다. 전체 화면 높이. 1vw = 1% * 뷰포트 너비. 이는 하나의 뷰포트가 100vw임을 의미합니다. 길이와 너비는 창 길이 또는 너비의 1/100과 같습니다.

예: 1920x800 디자인 초안

1/100 1920=19.2로 변환하여 1vw=19.2px; is: 1vw/y =100vw/1920px

Conversion 1/100 800=8 so 1vh=8px;

2.px: px는 화면 장치가 물리적으로 가질 수 있는 가장 작은 지점입니다. 표시하다. 길이의 상대적 단위입니다. 데스크톱 브라우저에서 1픽셀은 컴퓨터 화면을 향한 1개의 물리적 픽셀인 경우가 많지만 모바일 측면에서는 CSS의 1픽셀이 기기의 1픽셀과 다릅니다. 예를 들어 iPhone 3의 해상도는 320 x 480입니다. iphone4는 640x960이 되었지만, iphone4의 실제 화면 크기는 변하지 않았습니다. 이때 하나의 CSS 픽셀은 두 개의 물리적 픽셀과 같습니다.

3.rem: HTML 루트 요소의 글꼴 크기(font-size)를 기준으로 계산된 길이 단위로 설정할 수 있으며 기본값은 16px입니다.

4. em: 아래의 모든 최신 브라우저에서 기본 글꼴 크기는 16px입니다. 이때 1em = 16px입니다. em은 상위 크기를 상속하며 상대 단위이기도 합니다.

2. vw px rem 간의 변환

1. psd 디자인 초안은 1920px 기준이라고 가정합니다. 그런 다음:

100vw = 1920px => 1vw = 19.2px

가정: 1rem = 100px

그런 다음:

1920px=19.2rem = 100vw => 1rem = 100/19.2 =5.208vw

100px = 1rem = 5.208vw

이때 html의 루트 요소만 설정하면 됩니다.

글꼴 크기: 5.208vw이면 충분합니다.

반응형 레이아웃:

하나: 백분율과 rem 사용

너비 % 높이 rem 글꼴 크기 rem HTML에서 루트 요소의 글꼴 크기 설정

p>

p>

이런 식으로 페이지의 rem은 루트 요소에 따라 글꼴 크기를 표시합니다. 2rem은 32px입니다.

2: 백분율과 px를 사용합니다.

단위는 px로 설정되어 있으며, 모바일 단말기의 px는 자동으로 rem으로 환산됩니다.