컨테이너 크기 쿼리가 몇 번이나 도움이되었을 것입니다.

CSS 컨테이너 쿼리 기술이 점점 더 성숙 해지고 있으며, 많은 개발자들이 단순한 실험 일지라도 다양한 프로젝트에 적용하려고 노력하고 있습니다. 브라우저 지원은 전적으로 인기가 없지만 일부 프로젝트에서는 실용적이지만 이전 프로젝트에서 미디어 쿼리를 완전히 대체하기에는 충분하지 않을 수 있습니다.

컨테이너 쿼리는 실제로 매우 편리합니다! 사실, 나는 몇 가지 상황에 처해 있었고 그것을 사용하기를 간절히 원했지만 브라우저 호환성으로 제한됩니다. 당시 컨테이너 쿼리를 사용할 수 있다면 효과가 더 나을 것입니다.

다음 모든 데모는 글을 쓰는 시점에 크롬 또는 사파리에서 가장 잘 볼 수 있습니다. Firefox는 버전 109에서 지원을 제공 할 계획입니다.

사례 1 : 카드 그리드 모두이 사건에 익숙해야합니다. 이것은 우리가 거의 만나는 매우 일반적인 패턴입니다. 그러나 진실은 표준 미디어 쿼리 대신 컨테이너 쿼리를 사용할 수 있다면 많은 시간을 절약하고 더 나은 결과를 얻을 수 있다는 것입니다.

각 카드가 1 : 1 종횡비를 유지하기 위해 각 카드가 필요한 카드 그리드를 작성해야한다고 가정합니다. 이것은 보이는 것보다 어렵다! 문제는 뷰포트 폭에 따라 구성 요소 내용을 크기로 조정하면 구성 요소가 뷰포트에 응답하는 방식과 다른 조상 컨테이너가 뷰포트에 어떻게 응답 할 수 있다는 것입니다. 예를 들어, 특정 인라인 크기에 도달하면 카드 제목의 글꼴 크기가 감소하려면 신뢰할 수있는 방법이 없습니다.

VW 장치를 사용하여 글꼴 크기를 설정할 수 있지만 구성 요소는 여전히 브라우저의 뷰포트 너비에 바인딩됩니다. 이로 인해 카드 그리드가 동일한 중단 점이없는 다른 상황에서 사용될 때 문제가 발생할 수 있습니다.

내 실제 프로젝트에서 나는 JavaScript 방법을 가져 갔다 :

이벤트 크기를 듣습니다.

각 카드의 너비를 계산합니다.

카드 너비에 따라 인라인 글꼴 크기를 추가하십시오.

내부 스타일을 설정하기 위해 EM 장치를 사용하십시오.

많은 일처럼 보입니다. 그러나 이것은 다른 화면 크기와 다른 상황에서 원하는 스케일링을 달성하기위한 안정적인 솔루션입니다.

CQW 장치와 같은

컨테이너 쿼리 유닛

를 제공하기 때문에 컨테이너 쿼리가 더 좋습니다. 배운 것처럼 1CQW는 컨테이너 폭의 1%와 같습니다. 또한 컨테이너의 인라인 너비를 측정하는 CQI 장치를 가지고 있으며 CQB는 컨테이너 블록 너비에 사용됩니다. 따라서 500px 너비의 카드 컨테이너가있는 경우 50CQW의 값은 250px로 계산됩니다.

내 카드 그리드에서 컨테이너 쿼리를 사용할 수 있다면

구성 요소를 컨테이너로 설정할 수 있습니다.

그런 다음 너비의 10% x 스케일링 인 CQW 장치를 사용하여 패딩이있는 내부 래퍼를 설정할 수 있습니다.

이것은 주어진 뷰 포트 너비에서 카드가 사용되는 위치에 관계없이 카드의 가장자리와 그 내용 사이의 간격을 지속적으로 스케이스하는 좋은 방법입니다. 미디어 문의가 필요하지 않습니다!

또 다른 아이디어? CQW 장치를 내부 컨텐츠의 글꼴 크기로 사용한 다음 EM 장치를 사용하여 채우기를 적용하십시오.

5CQW는 임의의 값입니다. 방금 값을 선택했습니다. EM 장치는

글꼴 크기에 상대적이기 때문에 패딩은 여전히 ​​10CQW와 같습니다!

<code>.card { 
  container: card / size;
}</code>

당신은 그것을 알아 차렸습니까? 2em 동일한 컨테이너에 설정된 5CQW 글꼴 크기에 대해 EM 장치가 동일한 요소의 글꼴 크기 값과 관련이 있기 때문에 컨테이너는 우리가 익숙한 것과 다르게 작동합니다. 그러나 컨테이너 쿼리 장치는 의 최근 부모 (컨테이너)와 관련이 있음을 빨리 알았습니다.

예를 들어 이 예에서 5cqw는 요소의 너비를 기준으로 스케일이 아닙니다. .card__inner 대신 컨테이너로 정의 된 가장 가까운 부모로 확장됩니다. 그래서 케이스 2 : 교대 레이아웃 다른 프로젝트에서는 다른 카드 구성 요소도 필요합니다. 이번에는 화면이 작아지면 수평 레이아웃에서 수직 레이아웃으로 전환하려면 카드가 필요합니다. 그런 다음 다시 수평 레이아웃으로 돌아가서 수직 레이아웃으로 돌아갑니다.

나는이 어려운 작업을 수행하여 구성 요소가 두 개의 특정 뷰포트 범위 (새로운 미디어 쿼리 범위 구문에 대한 경례) 내에서 초상화가되도록했지만, 문제는 미디어 쿼리, 부모 및 뷰포트 너비에 응답 할 수있는 다른 모든 것에 잠겨 있다는 것입니다. 콘텐츠가 어디에서 중단 될지 걱정하지 않고 어떤 상황에서도 작동하는 것이 필요합니다! 컨테이너 쿼리는 규칙을 사용 하여이 문제를 쉽게 해결할 수 있습니다. 하나의 쿼리, 무한히 매끄럽다 : 하지만 기다려! 알아야 할 몇 가지 문제가 있습니다. 구체적으로, Prop 기반 설계 시스템에서 이러한 컨테이너 쿼리를 사용하는 것은 어려울 수 있습니다. 예를 들어,이 구성 요소에는 외관을 변경하기 위해 소품에 의존하는 자식 구성 요소가 포함될 수 있습니다.

왜 이것이 중요한가요? 카드의 초상 레이아웃에는 대체 스타일이 필요할 수 있지만 CSS를 사용하여 JavaScript 소품을 변경할 수는 없습니다. 따라서 원하는 스타일을 반복 할 수 있습니다. 나는 실제로 이것과 다른 게시물에서 이것을 해결하는 방법에 대해 논의했습니다. 많은 스타일에 컨테이너 쿼리를 사용해야하는 경우 미디어 쿼리에 의존하는 기존 설계 시스템에 넣으려고 시도하는 대신 주변의 전체 설계 시스템을 구축해야 할 수도 있습니다.

사례 3 : SVG 스트로크 이것은 최근에 사용한 매우 일반적인 패턴입니다. 컨테이너 쿼리를 사용하면 더 완전한 제품이 있습니다. 제목으로 아이콘이 잠겨 있다고 가정 해 봅시다 : .card

미디어 쿼리가 없어도 제목의 크기에 따라 아이콘을 쉽게 확장 할 수 있습니다. 그러나 문제는 SVG의

<code>.card__inner { 
  padding: 10cqw; 
} </code>

가 너무 얇아서 더 작은 크기로 눈치 채기에는 너무 얇을 수 있으며 더 큰 크기로 너무 두껍고 눈에 띄게 될 수 있다는 것입니다.

크기와 스트로크 너비를 결정하기 위해 각 아이콘 인스턴스에 대한 클래스를 작성하고 적용해야했습니다. 아이콘이 고정 글꼴 크기를 사용하는 제목 옆에있는 경우에도 괜찮지 만 지속적으로 변화하는 유체 유형을 사용할 때는 좋지 않습니다.

제목의 글꼴 크기는 뷰포트 너비를 기반으로 할 수 있으므로 SVG 아이콘을 그에 따라 조정해야하며 모든 크기로 올바르게 작동합니다. EM 장치를 사용하여 제목의 글꼴 크기에 대한 스트로크 너비를 설정할 수 있습니다. 그러나 특정 스트로크 크기 세트를 고수 해야하는 경우이 방법은 선형으로 스케일링하기 때문에 작동하지 않습니다. 뷰포트 너비에서 미디어 쿼리를 사용하지 않고 뷰포트 너비의 미디어 쿼리에 의지하지 않고는 특정 스트로크 너비 값으로 조정할 수 없습니다.

그러나 컨테이너 쿼리를 사용할 기회가 있다면 다음을 수행 할 것입니다.

이러한 구현을 비교하고 컨테이너 쿼리 버전이 컨테이너 폭에 따라 원하는 특정 너비로 ​​SVG의 스트로크를 어떻게 캡처하는지 확인하십시오.

추가 내용 : 기타 유형의 컨테이너 크기 쿼리

알겠습니다. 실제로 실제 프로젝트에서 이것을 만나지 못했습니다. 그러나 컨테이너 쿼리에 대한 정보를 자세히 살펴보면 컨테이너 크기 또는 물리적 크기와 관련된 컨테이너의 다른 내용을 쿼리 할 수 ​​있음을 알았습니다.

이 게시물에서 내가 사용한 예제는 대부분 쿼리 너비, 최대 및 최소 폭, 높이, 블록 크기 및 인라인 크기입니다.

<code>.card { 
  container: card / size;
}</code>

그러나 MDN은 우리가 쿼리 할 수있는 다른 두 가지를 간략하게 설명합니다. 하나는 방향이며, 우리는 미디어 쿼리에서 그것을 사용했기 때문에 많은 의미가 있습니다. 컨테이너 쿼리에 대해서도 마찬가지입니다

다른 하나는 종횡비입니다. 믿거 나 말거나 :
이것은이 두 가지 예를 실험하는 데 사용될 수있는 편집 가능한 데모입니다. 나는 아직이 두 가지에 대한 좋은 사용 사례를 실제로 찾지 못했습니다. 아이디어가 있거나 프로젝트에 도움이 될 수 있다고 생각되면 의견에 알려주십시오!

위 내용은 컨테이너 크기 쿼리가 몇 번이나 도움이되었을 것입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!