CSS의 컨테이너 쿼리 소개

CSS 컨테이너 쿼리 : 혁신 반응 디자인

이 발췌문에서 발췌 한 내용은 CSS의 전력을 발휘하면 적응성 및 탄력성 웹 구성 요소를 제작할 때 컨테이너 쿼리의 변형 가능성을 탐색합니다. 전체 브라우저 창 크기에 반응하는 뷰포트 미디어 쿼리와 달리 컨테이너 쿼리는 요소의 가용 공간 를 기반으로 스타일링을 허용하여 진정으로 구성 요소 수준의 응답 성을 가능하게합니다.

컨테이너 쿼리 vs. 뷰포트 미디어 쿼리 전통적인 뷰포트 기반 반응 형 디자인은 종종 레이아웃 그리드와 결합 된 단순화 된 장치 크기 (모바일, 태블릿, 데스크탑)와 관련된 중단 점에 의존합니다. 이 접근법은 개별 구성 요소 적응성으로 어려움을 겪고 있습니다. 더 큰 요소는 별도로 조정될 수 있지만 일반적으로 글로벌 중단 점을 따릅니다.

컨테이너 쿼리는 우수한 솔루션을 제공합니다. 다음 이미지는 컨테이너 쿼리가있는 카드 구성 요소를 뷰포트 크기와 완전히 독립적으로 보여줍니다. 카드의 외관은 사용 가능한 공간에 동적으로 적응합니다

참고 : Firefox 110이므로 컨테이너 쿼리에 대한 광범위한 브라우저 지원이 존재합니다. 폴리 필드는 이전 브라우저에서 사용할 수 있습니다. 컨테이너 쿼리 정의

컨테이너 쿼리를 사용하려면 먼저 속성을 ​​사용하여 컨테이너로 요소를 선언하십시오. (수평 쓰기 모드의 너비에 해당)는 가장 일반적이고 널리 지원되는 값입니다. 다음으로 색상을 파란색으로 설정합니다.

쓰기 모드에서 더 넓은 호환성을 위해서는 논리적 특성을 사용하십시오 :

너머 , 옵션에는

및 가 포함됩니다. 자세한 내용은 공식 사양을 참조하십시오.

카드 구성 요소 업그레이드 : 실용적인 예

컨테이너 쿼리가 없으면 카드 변형에는 일반적으로 뷰포트 브레이크 포인트와 관련된 수정 자 클래스가 포함됩니다. 아래 이미지는 세 가지 카드 크기와 해당 클래스를 보여줍니다.

[Codepen Demo : Viewport Media Query Cards] (Codepen 링크) 컨테이너 쿼리를 사용하여 기본 카드 스타일 (지원되지 않는 브라우저의 경우)을 유지하고 컨테이너 폭에 따라 추가 스타일을 정의합니다.

350px 이상 : 수평 레이아웃 600px 이상 : 배경으로 이미지
[Codepen Demo : 카드 용 컨테이너 쿼리] (Codepen 링크) 이 발췌문은 CSS의 전력을 발휘합니다 : 반응 형 사용자 인터페이스를위한 고급 기술 , itepoint premium에서 사용할 수 있습니다. 키 테이크 아웃 :

컨테이너 쿼리는 구성 요소 레벨 응답 성을 제공합니다 그들은

및

논리적 특성은 교차 쓰기 모드 호환성을 향상시킵니다 그들은 뷰포트 미디어 쿼리보다 반응 형 디자인에 대한보다 유연하고 세분화 된 접근 방식을 제공합니다.

(참고 : 가능한 경우 실제 CodePen 링크로 "CodePen으로 링크"를 교체하십시오.)

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