미디어 쿼리와의 싸움은 이제 그만! 대신 CSS 컨테이너 쿼리를 사용하세요-CSS 튜토리얼-php.cn

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

DDD

풀어 주다： 2024-11-21 09:16:11

원래의

1047명이 탐색했습니다.

Stop Fighting with Media Queries! Use CSS Container Queries Instead

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

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

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

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

@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 */
}

로그인 후 복사