CSS 크기 단위의 개요

이 기사는 CSS 크기 단위의 4 가지 주요 범주 인 절대, 글꼴이없는, 뷰포트 관계 및 컨테이너 관계를 탐구합니다. 다양한 장치 및 화면 크기에 걸쳐 반응적이고 적응 가능한 웹 레이아웃을 만들기위한 목적, 최적의 사용 사례 및 선택 전략을 검토 할 것입니다. 주요 개념 :

CSS 사이즈 단위 개요 :

우리는 다른 CSS 크기 단위를 소개하여 위에서 언급 한 네 가지 범주로 분류 할 것입니다. 지정된 , > 계산 및

의 차이를 이해하는 것은 효과적인 응용 프로그램의

세부 단위 유형 : 각 단위 카테고리 세부 사항을 탐구합니다. 절대 단위는 미디어 전체에서 일관성을 유지합니다. 글꼴 크기의 글꼴 방지 단위 스케일; 뷰포트 관계 장치는 브라우저 창에 조정됩니다. 컨테이너 관련 장치는 부모 요소의 크기에 따라 다릅니다. 실제 사례 및 사용 사례는 응용 프로그램을 설명합니다 실제 응용 프로그램 및 모범 사례 : 이 기사는 다양한 설계 시나리오에 적합한 단위를 선택하는 것에 대한 지침으로 마무리됩니다. 고정 된 치수, 확장 가능한 타이포그래피 용 글꼴 방지 장치, 반응 형 설계를위한 뷰포트 관계 장치 및 다양한 레이아웃 내의 유연한 구성 요소 용 컨테이너 관계 장치를 사용하는 것이 좋습니다. 목표는 다양한 장치에서 웹 사이트 가독성, 유용성 및 접근성을 향상시키는 것입니다. CSS 사이즈 단위 이해 CSS는 요소 크기 또는 길이를 지정하는 다양한 방법을 제공합니다. 이 단위는 네 가지 범주로 속합니다 :

절대 단위 :

, , 등.이 단위는 고정되어 있으며 다른 요소 또는 뷰포트와 독립적입니다. 글꼴-관계 단위 : , , 등.이 단위는 요소 또는 그 루트 요소의 글꼴 크기와 관련이 있습니다. > Viewport-Relative Units : , ,

, 등.이 단위는 브라우저 뷰포트의 치수와 관련이 있습니다. 컨테이너 관계 장치 :

, , , 등.

진행하기 전에 핵심 용어를 검토합시다 :

지정된 값 :
• 스타일에 정의 된 값 계산 된 값 : 브라우저 캐스케이드 및 상속 규칙 이후의 값이 적용됩니다.
중고 값 :
• 브라우저 조정 및 변환 후 최종 값 (상대 단위로의 상대 단위, 물리적 단위로 픽셀). 절대 단위
절대 단위는 특정 미디어 의존적 측정과 관련이 있습니다. 인쇄의 경우 물리적 단위에 해당합니다. 스크린의 경우 픽셀 (약 1/96 인치)과 관련이 있습니다. 예로는
• , , , ,
및 가 포함됩니다. 표 1은 이러한 단위와 그에 상응하는 단위를 요약합니다. 알려진 물리적 치수에 유용하지만 브라우저 글꼴 크기가 조정 된 사용자의 확장 성이 부족하여 글꼴 크기에 사용하지 마십시오.

글꼴-관계 단위

Font Relivative Units는 글꼴 메트릭을 사용하여 요소 치수를 결정합니다. 이것들은 요소의 (로컬) 또는 루트 요소의 (루트-관련)에 상대적 일 수 있습니다.

및

가 일반적인 예입니다. 는 부모의 in에 비해, cm는 루트 요소의 mm와 관련이 있습니다. , Q, pt 및 해당 루트-관계 상대 (, pc,

)와 같은 다른 단위는 글리프 차원 (캐릭터의 시각적 표현)을 기반으로합니다. 이들은 글꼴마다 크게 다를 수 있으며 최종 렌더링 된 크기에 영향을 미칩니다. 라인 높이 단위 ( 및 ) 도이 범주에 포함되어 있습니다. 뷰포트-관계 단위

Viewport-Relative Units는 브라우저 창의 크기에 따라 다릅니다. 초기 포함 블록 (PAGED 미디어의 뷰포트 또는 페이지)에 비해 계산됩니다. 는 각각 뷰포트 너비와 높이의 1%를 나타냅니다. 는 각각

및 font-size의 작고 큽니다. 동적 뷰포트 유닛 (font-size, 등)은 브라우저 인터페이스 요소로 인해 뷰포트가 변경됨에 따라 조정됩니다. 이 장치는 전체 화면 요소와 유체 타이포그래피를 만드는 데 유용합니다. em 컨테이너 관계 장치 rem em 컨테이너 쿼리와 함께 사용되는 요소의 함유 블록에 비해 컨테이너 관련 장치 (또는 컨테이너 쿼리 길이 장치)가 계산됩니다. 및

는 컨테이너의 너비와 높이의 1%를 나타냅니다. cqw는 각각 인라인 및 블록 크기와 관련이 있으며 속성의 영향을받습니다. cqh 및 cqi는 더 작고 cqb와 writing-mode입니다. 이 단위는 다른 컨텍스트에 적응하는 구성 요소를 생성 할 수 있습니다. 결론 cqmin cqmax CSS 크기 단위 마스터 링은 반응적이고 적응 가능한 웹 레이아웃을 만드는 데 핵심입니다. 단위 선택은 웹 사이트 가독성, 유용성 및 접근성에 큰 영향을 미칩니다. 설계 요구, 대상 장치 및 접근성 요구 사항에 따라 단위를 선택하십시오. 다른 단위의 조합이 종종 가장 효과적인 접근법입니다. 다음 섹션에는 추가 설명을 위해 자주 묻는 질문 섹션이 포함되어 있습니다. cqi cqb (원래 FAQ 섹션의 구조와 내용을 반영하면서 자주 묻는 질문 섹션)

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