CSS를 사용하여 상위 Div의 크기에 따라 요소의 크기를 어떻게 조정할 수 있습니까?

미디어 쿼리를 사용하여 Div 요소를 기반으로 요소 크기 조정: 컨테이너 쿼리 공개

미디어 쿼리는 Div 요소에 따라 요소 크기를 조정하는 데 중요한 역할을 합니다. 화면의 크기. 그러나 특정 div 요소의 크기를 기반으로 요소를 타겟팅하는 기능이 부족합니다.

역사적으로 미디어 쿼리는 특정 화면 크기를 기반으로 동적 콘텐츠 조정을 위한 유일한 메커니즘이었습니다. 그러나 CSS의 발전으로 인해 CSS Containment Module에 정의된 컨테이너 쿼리가 도입되었습니다. 이 기능은 포함된 요소의 차원을 기반으로 요소에 스타일을 적용할 수 있도록 하여 이 질문에 제시된 문제에 대한 솔루션을 제공합니다.

컨테이너 쿼리에 대한 브라우저 지원은 계속 발전하고 있으며, 사양 및 실제 예는 제공된 리소스에서 찾을 수 있습니다.

컨테이너 이전 쿼리 시대에는 JavaScript를 사용하여 대상 div의 크기 변경을 모니터링하고 필요한 스타일을 동적으로 적용하는 방법이 있었습니다. Flexbox 및 사용자 정의 속성과 같은 최신 레이아웃 기술을 사용하면 컨테이너 및 미디어 쿼리의 필요성을 줄일 수도 있습니다.

위 내용은 CSS를 사용하여 상위 Div의 크기에 따라 요소의 크기를 어떻게 조정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!