미디어 쿼리 없이 유동적인 열 레이아웃을 얻을 수 있습니까?

미디어 쿼리 없이 유동적인 열 레이아웃 달성

최신 CSS 기술은 다양한 화면 크기에 유연하게 적응하는 반응형 레이아웃을 만들기 위한 다양한 옵션을 제공합니다. 이렇게 하면 여러 미디어 쿼리가 필요하지 않으며 여러 기기에서 원활하게 흐르는 레이아웃을 생성할 수 있습니다.

이 기사에서는 특정 레이아웃 시나리오(데스크탑 보기의 3열 레이아웃, 전환)를 달성하는 방법을 살펴봅니다. 미디어 쿼리에 의존하지 않고 모바일 보기의 단일 열 레이아웃으로 변환합니다.

과제

가장 큰 과제는 3열 레이아웃에서 1열 레이아웃으로 원활하게 전환하는 것입니다. 뷰포트가 좁아지면 열은 단일 열로 축소되어 어색한 중간 단계를 피해야 합니다.

해결책

해결책에는 Flexbox와 클램프() 함수. flex-wrap:wrap;으로 래핑하도록 플렉스 항목을 설정한 다음 flex-basis 속성에서 클램프()를 사용하여 뷰포트 너비에 따라 각 플렉스 항목의 너비를 결정합니다.

코드

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

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

방법 작동합니다

• clamp() 함수는 최소값, 선호하는 값, 최대값의 세 가지 인수를 사용합니다.
• 이 시나리오에서는 최소값을 설정합니다. 0px까지, 선호 값은 100%, 최대 값은 (400px - 100vw) * 1000.
• 뷰포트 너비가 400px보다 큰 경우, 클램프() 함수는 선호하는 값인 100%를 반환하여 너비가 같은 3개의 열을 생성합니다.
• 뷰포트 너비가 아래로 감소함에 따라 400px인 경우, 클램프() 함수는 400px과 현재 뷰포트 간의 차이에 비례하는 값을 반환합니다. width.
• 이렇게 하면 Flex 항목이 여러 줄로 줄바꿈되어 단일 열 레이아웃이 생성됩니다.

결론

클램프() 함수와 Flexbox를 사용하면 미디어 쿼리 없이도 다양한 화면 크기에 원활하게 적응하는 반응형 레이아웃을 만들 수 있습니다. 이 접근 방식은 방문자에게 더욱 유연하고 사용자 친화적인 경험을 제공하여 웹사이트가 모든 기기에서 멋지게 보이도록 보장합니다.

위 내용은 미디어 쿼리 없이 유동적인 열 레이아웃을 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!