CSS 레이아웃 단위의 진화와 적용: 픽셀에서 루트 요소의 글꼴 크기를 기반으로 하는 상대 단위로-CSS 튜토리얼-php.cn

CSS 레이아웃 단위의 진화와 적용: 픽셀에서 루트 요소의 글꼴 크기를 기반으로 하는 상대 단위로

王林

풀어 주다： 2024-01-05 17:41:43

원래의

1456명이 탐색했습니다.

CSS 레이아웃 단위의 진화와 적용: 픽셀에서 루트 요소의 글꼴 크기를 기반으로 하는 상대 단위로

px에서 rem으로: CSS 레이아웃 단위의 진화와 적용

소개:
프론트 엔드 개발에서는 페이지 레이아웃을 구현하기 위해 CSS를 사용해야 하는 경우가 많습니다. 지난 몇 년 동안 CSS 레이아웃 단위는 진화하고 발전했습니다. 처음에는 요소의 크기와 위치를 설정하는 단위로 픽셀(px)을 사용했습니다. 그러나 반응형 디자인의 등장과 모바일 기기의 대중화로 인해 픽셀 단위는 점차 문제를 드러내고 있습니다. 이러한 문제를 해결하기 위해 새로운 단위 rem이 등장했고 점차 CSS 레이아웃에 널리 사용되었습니다.

1. 픽셀 단위(px)의 한계
1.1 고정 크기
픽셀 단위는 가장 먼저 널리 사용되는 단위로 레이아웃에서 고정 크기의 특성을 갖습니다. 이는 페이지가 다른 장치나 다른 화면 크기에 표시될 때 픽셀 단위의 크기가 적응되지 않아 페이지 레이아웃이 혼란스럽거나 완전히 표시되지 않을 수 있음을 의미합니다.

1.2 고해상도 기기 문제
레티나 화면과 같은 고해상도 기기의 인기로 인해 픽셀 단위의 단점은 더욱 분명해졌습니다. 픽셀 단위 설정이 낮은 요소가 고해상도 장치에 표시되면 픽셀화 또는 흐릿한 표시가 발생하여 사용자 경험에 영향을 미칩니다.

1.3 복잡한 편집
장치의 해상도에 따라 픽셀 단위를 조정해야 합니다. 즉, CSS를 작성할 때 다양한 장치의 픽셀 밀도를 고려해야 하므로 코드 작성 및 유지 관리가 복잡해집니다.

2. rem 단위 소개
2.1 rem이란 무엇입니까
rem은 루트 요소(html)를 기준으로 한 글꼴 크기의 단위를 나타내는 상대 단위입니다. 크기는 루트 요소의 글꼴 크기를 기준으로 합니다. 루트 요소의 글꼴 크기를 16px로 설정하면 1rem은 16px과 같습니다.

2.2 rem의 장점

적응형 레이아웃: rem 단위를 사용하면 루트 요소의 글꼴 크기에 따라 적응적으로 조정될 수 있으므로 다양한 장치에서 유연한 레이아웃 변경이 가능합니다.
고해상도 기기 문제 해결: rem은 상대적 단위이고 기기의 픽셀 밀도에 영향을 받지 않으므로 다양한 해상도에서도 일관된 레이아웃 효과를 얻을 수 있습니다.
코드 작성 단순화: rem 단위를 사용하면 코드 작성이 단순화되고 더 이상 다양한 장치의 픽셀 밀도를 고려할 필요가 없습니다.

3.rem 단위 사용 방법
3.1 루트 요소의 글꼴 크기 설정
rem 단위를 사용하기 전에 먼저 루트 요소의 글꼴 크기를 설정해야 합니다. 일반적으로 루트 요소의 글꼴 크기를 16px, 즉 1rem=16px로 설정합니다.

html {
  font-size: 16px;
}

로그인 후 복사

3.2 rem 단위 사용
루트 요소의 글꼴 크기를 설정하면 다른 요소의 레이아웃에 rem 단위를 사용할 수 있습니다.

.container {
  width: 20rem; /* 相当于320px */
  height: 10rem; /* 相当于160px */
  font-size: 1.2rem; /* 相当于19.2px */
  margin-top: 2rem; /* 相当于32px */
}

로그인 후 복사

4. 루트 요소의 글꼴 크기를 동적으로 변경합니다.
4.1 미디어 쿼리
미디어 쿼리는 다양한 화면 크기에 따라 루트 요소의 글꼴 크기를 동적으로 변경할 수 있습니다.

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

로그인 후 복사

4.2 JavaScript 동적 계산
JavaScript를 사용하여 화면 크기에 따라 루트 요소의 글꼴 크기를 동적으로 계산합니다.

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

로그인 후 복사

5. 요약
rem 단위를 사용하면 반응형 레이아웃을 구현하고 다양한 기기의 레이아웃 문제를 해결할 수 있습니다. rem 단위를 사용하면 레이아웃을 더욱 유연하고 적응적으로 만들 수 있으며 코드 작성도 단순화할 수 있습니다. 실제 프로젝트에서는 더 나은 사용자 경험을 달성하기 위해 실제 필요에 따라 적절한 레이아웃 단위를 선택하고 합리적으로 rem 단위를 사용해야 합니다.

참고자료: