컨테이너 쿼리는 전체 뷰포트가 아닌 개별 요소 (컨테이너)의 차원을 기반으로 레이아웃 결정을 활성화하여 웹 디자인에 혁명을 일으킬 준비가되어 있습니다. 폭은 600px의 행 레이아웃을 채택하는 컨테이너를 상상해 보지만 너비가 더 좁은 컬럼 레이아웃으로 전환한다고 상상해보십시오. 이는 화면 크기의 중단 점에만 의존하는 전통적인 반응 형 디자인과 크게 다릅니다.
백분율 단위 (%)는 일부 컨테이너 관계 크기 조정을 제공하지만 그 기능은 제한적입니다. 예를 들어, 컨테이너의 너비는 부모 너비의 백분율로 설정할 수 있지만 속성을 연결하는 메커니즘은 없습니다. 예를 들어, 글꼴 크기를 컨테이너 너비의 백분율로 설정할 수는 없습니다.
컨테이너 장치를 입력하십시오! 제안 된 사양은 몇 가지 새로운 단위를 소개합니다.
이것은 전례없는 유연성을 잠금 해제합니다. 글꼴 크기, 라인 높이, 갭, 마진 - 사실상 모든 속성은 이제 컨테이너 폭에 따라 동적으로 조정할 수 있습니다.
조기 액세스가 가능합니다! Miriam (@terriblemia)은 Chrome Canary의 지원을 강조합니다 (컨테이너 쿼리 플래그가 활성화 됨). 빠른 데모 비디오는 잠재력을 보여줍니다.
Scott의 추가 탐색 (Scott의 작업에 대한 링크가 제공되면 여기에 삽입 될 것입니다)과 Ahmad Graded는 추가 통찰력을 제공합니다.
Ahmad Shadeed는 구성 요소 내에서 글꼴 크기, 패딩 및 마진을 관리하기위한 컨테이너 장치의 효율성을 강조하여 수동 조정이 필요하지 않습니다.
컨테이너 쿼리 및 컨테이너 장치의 동시 방출은 확실하지 않지만 잠재적 영향은 부인할 수 없습니다.
위 내용은 컨테이너 장치는 꽤 편리해야합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!