미디어 쿼리 없이 3열 데스크탑과 1열 모바일로 유동 격자 레이아웃을 만드는 방법은 무엇입니까?

미디어 쿼리 없이 3열 데스크톱 및 1열 모바일 레이아웃 달성

문제:
어떻게 만들 수 있나요? 3열 데스크톱 레이아웃에서 1열 모바일 레이아웃으로 전환하는 유동 그리드 레이아웃 미디어 쿼리에 의존하시나요?

해결책:
CSS는 미디어 쿼리에 의존하지 않고도 동적 레이아웃 조정을 허용합니다. 방법은 다음과 같습니다.

1. 클램프() 및 Flex 활용:
초기 CSS에서는 화면 크기에 따라 반복(3)에서 반복(1)으로 전환하기 위해 Grid-template-columns 속성에 클램프()를 사용했습니다. 그러나,clamp()만으로는 원하는 결과를 얻을 수 없습니다. 대신, 플렉스 항목의 flex-basis 속성 내에서 클램프()를 사용하여 래핑 동작을 생성할 수 있습니다:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 100px;
  border: 2px solid;
  background: red;
  flex-basis: max(0px, (400px - 100vw) * 1000);
  flex-grow: 1;
}

2. 화면 크기에 따라 수식 조정:
이 코드에서 400px은 레이아웃이 3열에서 1열로 전환되어야 하는 화면 크기를 나타냅니다. 원하는 중단점을 기준으로 이 값을 조정할 수 있습니다. 예를 들어 500px로 전환하려면 400px를 500px로 바꾸세요.

3. 계산 설명:
max(0px, (400px - 100vw) * 1000) 공식은 뷰포트 너비가 400px보다 클 때 각 항목의 flex-basis가 0px로 유지되도록 보장합니다. 이렇게 하면 3열 레이아웃으로 나란히 유지됩니다. 그러나 뷰포트 너비가 400px 미만으로 줄어들면 flex-basis가 큰 값이 되어 항목을 별도의 줄에 효과적으로 밀어넣어 1열 레이아웃이 됩니다.

이런 방식으로 클램프()를 활용하면, 미디어 쿼리 없이도 다양한 화면 크기에 적응하는 유연하고 반응성이 뛰어난 레이아웃을 얻을 수 있습니다.

위 내용은 미디어 쿼리 없이 3열 데스크탑과 1열 모바일로 유동 격자 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!