미디어 쿼리 없이 3열 데스크탑에서 1열 모바일 레이아웃을 구현하는 방법은 무엇입니까?

미디어 쿼리 없이 3열 데스크톱에서 1열 모바일 레이아웃 구현

다양한 화면 크기에 적응하는 유연한 레이아웃을 만드는 것은 일반적인 웹 디자인 과제입니다. 미디어 쿼리는 안정적인 솔루션이지만 레이아웃에 불필요한 중단점이 발생할 수 있습니다. 이 기사에서는 미디어 쿼리를 사용하지 않고 3열 데스크톱에서 1열 모바일 레이아웃을 달성하기 위한 대체 접근 방식을 살펴봅니다.

문제:

종종 웹사이트에서는 3-열 레이아웃을 원합니다. 데스크톱의 열 레이아웃, 모바일 장치의 단일 열 레이아웃으로 전환됩니다. 그러나 다중 열 레이아웃에서 단일 열 레이아웃으로 전환하는 동안 열이 좁아지고 왜곡되는 중간 단계가 발생합니다. 클램프(), minmax() 및 기타 기능을 활용하려는 시도는 만족스럽지 못한 결과를 낳는 경우가 많습니다.

해결책:

제안된 솔루션은 다음 공식과 함께 flex-basis를 활용합니다. 미디어 쿼리 없이 효과적으로 중단점을 생성합니다. 수식은 다음과 같습니다.

max(0px, (target-screen-size - 100vw)*1000)

예를 들어 화면 크기 400px에서 중단점을 생성하려면:

max(0px, (400px - 100vw)*1000)

화면이 400px보다 넓으면 수식은 0px를 반환합니다. 열이 영향을 받지 않는지 확인합니다. 그렇지 않으면 큰 값을 반환하여 효과적으로 줄바꿈을 강제하고 단일 열 레이아웃을 생성합니다.

구현:

플렉스 기반에 수식을 적용합니다. 컨테이너의 하위 항목:

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

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

이 접근 방식은 명시적인 미디어 쿼리의 필요성을 제거하는 동시에 보다 원활한 쿼리를 제공합니다. 열 레이아웃 간 전환.

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