글꼴 크기에 사용할 수있는 CSS 길이 장치의 연습-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

尊渡假赌尊渡假赌尊渡假赌

Feb 17, 2025 pm 12:41 PM

A Walkthrough of CSS Length Units You Can Use for Font Size 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.