집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 단위 요약(예: rem, px, em, vw, vh, vm)

CSS 단위 요약(예: rem, px, em, vw, vh, vm)

青灯夜游앞으로: 2018-10-10 16:14:433815검색

이 글에서는 CSS 단위(예: rem, px, em, vw, vh, vm)를 요약하고 이러한 단위 간의 차이점을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

px: 화면 디스플레이 해상도에 상대적인 픽셀의 상대적 길이 단위입니다.

em: em 값은 고정되지 않으며 상위 요소의 글꼴 크기와 통합됩니다. 참고:

1. body를 선택하고 Font-size=62.5%;를 선언합니다.

2. 원래 px 값을 10으로 나눈 다음 단위를 em으로 바꿉니다. 3. 확대된 글꼴 em 값을 다시 계산합니다. 글꼴 크기를 반복적으로 선언하지 마세요.

모든 브라우저의 기본 글꼴 크기는 16px입니다. 조정되지 않은 모든 브라우저는 1em=16px, 0.75em=12px 및 10px=0.625em을 준수합니다. Font-size 변환을 단순화하려면 CSS의 본문 선택기에서 Font-size=62.5%를 선언해야 합니다. 그러면 em 값이 16px*62.5%=10px가 됩니다. 따라서 12px는 1.2em이고 10px는 즉, 원래 px 값을 10으로 나누어 em 단위로 바꾸면 됩니다.

rem

: 상대 단위(루트 em은 rem임) rem을 글꼴 크기 설정 단위로 사용하는 경우 HTML 루트 요소의 크기를 기준으로 모든 글꼴 크기를 루트를 통해 비례적으로 조정할 수 있습니다. 일반적으로 사용 시 본문이나 HTML에 작성됩니다. 예:

body{font-size:625%;}

, 즉 1rem=100px; 그러나 프로젝트 작성 시에는

　　html{font-size:10px}　　　　　　//10px==62.5%

　　@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

　　@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

　　@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

　　@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

　　@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

　　@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

　　@media screen and (min-width:800px){html{font-size:25px}}

과 같은 미디어 쿼리를 사용하는 것이 가장 좋습니다. vw

: 뷰포트 최대 너비, 1vw=뷰포트 너비의 1%

vh: 뷰포트의 최대 높이, 1vh=뷰포트 높이의 1%

vmin/vm: 뷰포트 너비나 높이가 더 작습니다. 가장 작은 것을 vmin(즉, vm) 단위로 100개로 나눈다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼
을 방문하세요!

CSS 단위 요약(예: rem, px, em, vw, vh, vm)

관련 기사