미디어 쿼리와의 싸움은 이제 그만! 대신 CSS 컨테이너 쿼리를 사용하세요

메인 콘텐츠에서는 완벽해 보이지만 사이드바에서는 깨지는 구성요소를 만든 적이 있나요? ?

미디어 쿼리는 문제의 절반만 해결합니다. 즉, 구성 요소가 실제로 어디에 있는지가 아닌 화면 크기에 관심을 가집니다. 컨테이너 쿼리가 필요한 곳이 바로 여기입니다.

미디어 쿼리에 어떤 문제가 있나요?

이 카드 구성요소를 구축했다고 가정해 보겠습니다.

@media (min-width: 768px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

모바일과 데스크톱 모두에서 멋지게 보입니다! 팀원이 그것을 좁은 사이드바에 넣을 때까지 말이죠. 이제 "데스크톱" 레이아웃이 300px 공간에 들어가려고 합니다. 아야.

CSS 기술을 향상하고 싶으십니까? 순수한 CSS가 복잡한 JavaScript 코드를 어떻게 대체할 수 있는지 알아보려면 "JavaScript를 대체한 최신 CSS 기술"을 확인하세요.

컨테이너 쿼리: 더 나은 방법

컨테이너 쿼리는 "화면 너비가 얼마나 되나요?"라고 묻는 대신 "내 컨테이너 너비는 얼마나 되나요?"라고 묻습니다. 작동 방식은 다음과 같습니다.

/* Step 1: Mark the container */
.card-wrapper {
  container-type: inline-size;
}

/* Step 2: Style based on container width */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

이제 카드가 화면이 아닌 컨테이너에 맞게 조정됩니다. 어디에나 놓아두세요. 작동됩니다!

실제 예: 스마트 제품 카드

어떤 공간에도 잘 어울리는 제품 카드는 다음과 같습니다.

<div>





<pre class="brush:php;toolbar:false">.product-wrapper {
  container-type: inline-size;
}

/* Mobile-first: Stack everything */
.product {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Medium container: Side-by-side layout */
@container (min-width: 400px) {
  .product {
    grid-template-columns: 200px 1fr;
  }
}

/* Large container: More sophisticated layout */
@container (min-width: 600px) {
  .product .content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .product .desc {
    grid-column: 1 / -1;
  }
}

브라우저 지원?

좋은 소식입니다! 컨테이너 쿼리는 모든 최신 브라우저에서 작동합니다. 이전 브라우저의 경우 모바일 레이아웃이 대체됩니다.

/* Default mobile layout */
.product { display: grid; }

/* Enhance for modern browsers */
@supports (container-type: inline-size) {
  /* Container query styles */
}

UI 세부정보를 확인하고 싶으신가요? '사용자가 은밀히 판단하는 12가지 프런트엔드 마이크로 인터랙션'은 웹사이트를 세련된 느낌으로 만드는 미묘한 인터랙션을 보여줍니다.

빠른 팁

1. 컨테이너 쿼리를 너무 깊게 중첩하지 마세요. 지저분해집니다
2. 너비만 필요한 경우 크기 대신 인라인 크기를 사용하세요
3. 다양한 크기의 용기에서 부품 테스트

직접 시도해 보세요!

1. 여러 장소에 존재하는 구성요소 선택
2. 포장지에 컨테이너 유형: 인라인 크기 추가
3. 미디어 쿼리를 컨테이너 쿼리로 대체
4. 자동으로 적응하는 모습을 지켜보세요!

더 자세히 알고 싶으십니까?

• MDN 가이드
• 컨테이너 쿼리를 사용할 수 있나요

컨테이너 쿼리로 멋진 것을 구축했다면 댓글을 남겨주세요! ?

위 내용은 미디어 쿼리와의 싸움은 이제 그만! 대신 CSS 컨테이너 쿼리를 사용하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!