글꼴 크기에 사용할 수있는 CSS 길이 장치의 연습

CSS 글꼴 크기 단위에 대한 자세한 설명 : PX, EM, REM, %, VW/VH 및 기타

CSS는 각각 다른 용도 및 계산 방법을 갖는 글꼴 크기와 같은 속성의 길이를 지정하기위한 다양한 단위를 제공합니다. 이 기사는 픽셀 (PX), EM 유닛 (EM), Rem Unit (REM), 백분율 (%) 및 뷰포트 장치 (VW, VH, VMIN, VMAX) 등을 포함하여 이러한 단위를 깊이 탐색하고 분석합니다. 웹 디자인의 응답 공식.

픽셀 (px)

픽셀은 고정 된 크기의 단위이며 일반적으로 화면의 개별 도트를 참조합니다. 그러나, 다른 장치 픽셀 밀도로 인해, 다른 장치에 대한 PX 장치의 디스플레이 효과는 일치하지 않을 수 있습니다. CSS 픽셀은이 문제를 피하기 위해 참조 픽셀별로 크기를 계산합니다. 참조 픽셀은 독자가 96dpi의 픽셀 밀도가있는 장치의 화면에서 하나의 암 (약 28 인치) 일 때 단일 픽셀의 시야각으로 정의됩니다. 이것은 하나의 픽셀 크기를 약 0.26mm로 만듭니다.

픽셀을 사용하여 글꼴 크기를 설정하는 것은 유지 관리하기가 어렵고 비우호적입니다. 큰 웹 사이트에서 모든 요소의 글꼴을 변경하는 것은 악몽이 될 것입니다. 또한 사용자는 브라우저 글꼴 크기 설정을 통해 픽셀 유닛의 글꼴 크기를 조정할 수 없습니다.

em 단위 (em) em 단위는 사용자 기본 설정을 덮어 쓰는 것을 피할 수 있습니다. 1EM 값은 브라우저의 기본 글꼴 크기 (일반적으로 16px)에 따라 다릅니다. 요소의 EM 값은 계산 된 글꼴 크기에 의해 결정됩니다. 예를 들어, 요소가 글꼴 크기 25px를 상속하면 해당 요소의 2EM은 50px로 계산됩니다. EM 장치는 독립 모듈 내의 요소와 같이 웹 사이트의 독립적 인 부분 내에서 관련 요소의 글꼴 크기를 설정하는 데 특히 적합합니다.

REM 유닛 (rem)

REM 장치는 EM 장치의 글꼴 크기 상속 문제를 해결합니다. 1REM의 값은 항상 루트 요소의 글꼴 크기와 같으며 계산을 단순화합니다.

rem 단위는 다른 독립 모듈의 모 컨테이너의 글꼴 크기를 설정하는 데 사용될 수 있으므로 모듈의 모든 요소의 글꼴 크기는 다른 모듈과 독립적으로 모듈 요소를 기반으로합니다.

%(%)

백분율은 EM 장치와 유사하며 종종 계산을 단순화하기 위해 응답 형 웹 디자인에서 루트 요소의 글꼴 크기를 설정하는 데 사용됩니다. 뷰포트 장치 (vw, vh, vmin, vmax)

뷰포트 장치를 사용하면 뷰포트 크기에 따라 다른 요소의 글꼴 크기를 설정할 수 있습니다. 이렇게하면 여러 중단 점에서 다른 글꼴 크기 값을 설정할 필요가 없습니다. 예를 들어, 1VW는 뷰포트 너비의 1%와 같습니다.

뷰포트 장치의 단점은 매우 작거나 매우 큰 뷰포트 크기로 계산 된 글꼴 크기로 텍스트를 읽기 어렵게 만들 수 있다는 것입니다. 솔루션은 뷰포트 장치를 다른 장치와 함께 사용하는 것입니다.

다른 절대 단위

CSS는 또한 화면에서 덜 유용한 많은 절대 장치를 정의하지만 포인트 (PT) 및 PICAS (PC)와 같은 인쇄 매체에 중요한 역할을합니다. 키워드를 사용하여 글꼴 크기를 설정하십시오 글꼴 크기는 절대 키워드 (예 : xx-small, x-small, small, medium, large, x-large 및 xx large) 및 상대 키워드 (크고 작은)를 포함한 키워드를 사용하여 설정할 수 있습니다.

브라우저 지원

프로덕션 환경에서 이러한 장치를 사용하기 전에 대상 브라우저가 잘 지원하는지 확인하십시오. PX, EM과 같은 장치는 모든 주류 브라우저에서 지원되며 REM 및 뷰포트 장치는 이전 브라우저에서 제대로 지원되지 않을 수 있습니다.

결론 절대 단위는 가능한 한 많이 피해야하지만 상대 단위를 사용해야합니다. EM 장치는 모듈에서 하위 요소의 글꼴 크기를 설정하는 데 적합하며 REM 장치는 모듈의 루트 상위 요소와 같은 독립적 인 요소의 글꼴 크기를 설정하는 데 적합합니다. 뷰포트 장치는 다른 장치와 함께 사용하여 레이아웃이 뷰포트 너비 또는 높이의 변화에 ​​적합한 지 확인할 수 있습니다.

이 기사는 Tom Hodgins에 의해 검토되었습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!

위 내용은 글꼴 크기에 사용할 수있는 CSS 길이 장치의 연습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!