다양한 종류의 CSS 상대 단위

CSS에는 다양한 유형의 상대 단위가 있으며 각 유형에는 적용 가능한 시나리오와 특성이 있습니다. 일반적으로 사용되는 상대 단위는 아래에 소개되어 있으며 일부 특정 코드 예제가 제공됩니다.

1. em
   em은 현재 요소의 글꼴 크기를 기준으로 계산된 단위입니다. 예를 들어 요소의 글꼴 크기가 16px인 경우 1em은 16px과 같습니다. 요소의 글꼴 크기가 2em이면 해당 요소의 글꼴 크기는 상위 요소 글꼴 크기의 두 배가 됩니다.

p {
  font-size: 16px;
}

span {
  font-size: 0.5em; /* 相当于8px */
}

2. rem
   rem은 루트 요소(즉, html 요소)의 글꼴 크기 크기를 기준으로 계산된 단위입니다. em과 비슷한 방식으로 사용되지만 상위 요소의 영향을 받지 않습니다.

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

3. vw/vh
   vw 및 vh는 뷰포트 너비 및 뷰포트 높이에 상대적인 단위입니다. 1vw는 창 너비의 1%와 같고, 1vh는 창 높이의 1%와 같습니다. 이 단위는 반응형 디자인에서 뷰포트의 크기에 따라 요소의 크기를 자동으로 조정하는 데 자주 사용됩니다.

div {
  width: 50vw; /* 相当于视窗宽度的50% */
  height: 30vh; /* 相当于视窗高度的30% */
}

4. %
   백분율 단위는 상위 요소의 크기를 기준으로 계산됩니다. 예를 들어 요소의 너비가 50%인 경우 해당 요소의 너비는 상위 요소 너비의 절반입니다.

.container {
  width: 200px;
}

div {
  width: 50%; /* 相当于100px */
}

5. ch
   ch는 현재 글꼴의 너비를 기준으로 계산된 단위입니다. 1ch는 현재 글꼴의 문자 "0"의 너비와 같습니다.

p {
  font-size: 16px;
}

span {
  width: 10ch; /* 相当于160px */
}

요약:
상대 단위는 CSS에서 더욱 유연하고 적응 가능한 레이아웃 방법을 제공합니다. 필요에 따라 적절한 단위를 선택하십시오. 요소의 특성과 디자인 요구 사항에 따라 적절한 상대 단위를 선택할 수 있습니다. 상대 단위를 합리적으로 사용함으로써 적응형 레이아웃 효과를 얻을 수 있습니다.

위 내용은 다양한 종류의 CSS 상대 단위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!