반응 형 레이아웃, 미디어 쿼리가 적습니다

반응 형 디자인은 현대 웹 개발의 초석입니다. 미디어 쿼리는 오랫동안 필수적 이었지만 CSS 진보는 의존도를 크게 줄이는 기술을 제공합니다. 이 기사는 미디어 쿼리를 최소화하거나 0을 최소화하여 반응 형 레이아웃을 만드는 방법을 보여줍니다.

명시 적 미디어 쿼리 중단 점없이 응답 성을 달성하기 위해 Flexbox 및 그리드 기반 접근 방식을 살펴 보겠습니다.

Flexbox 및 flex-wrap 활용합니다

간단한 예제는 flex: 400px 사용하여 요소의 기본 폭을 설정합니다. 불충분 한 공간이 존재할 때 항목은 새로운 라인으로 감습니다. 나머지 공간은 각 라인의 요소에 분포됩니다. flex: 400px 는 flex-grow: 1; flex-shrink: 1; flex-basis: 400px; .

이 접근법은 간결성 (두 줄의 코드)을 제공하지만 일관된 바닥 글 폭, 행당 항목 및 래핑 동작에 대한 세밀한 제어가 부족합니다.

CSS 그리드와 함께 auto-fit 및 minmax 사용

CSS repeat(auto-fit, minmax(400px, 1fr)) 사용하는 CSS 그리드는 래핑 동작과 비슷한 기본 폭을 제공합니다. 요소는 사용 가능한 공간을 채우기 위해 자라며 행에서 일관된 폭을 유지합니다. 그러나 품목은 400px 이하로 줄어들 수 없어서 오버플로가 발생할 수 있습니다.

행당 항목 제어

Flexbox 접근 방식을 개선하면 flex: 400px flex: max(400px, (100% - 20px)/3); . 이는 각 행을 최대 3 개 항목으로 제한합니다. 20px 는 두 가지 간격을 차지합니다 (품목들 사이의 10px 간격을 가정). 보다 일반화 된 공식 인 max(400px, 100%/(N 1) 0.1%) 는 명시적인 갭 계산이 필요하지 않으며, 여기서 n은 행당 최대 항목 수를 나타냅니다. 이것은 행당 항목을 부분적으로 제어합니다. CSS 그리드에도 동일한 원칙이 적용됩니다.

품목이 증가하고 줄어들도록합니다

그리드 접근법의 오버플로 문제를 해결하기 위해 clamp(100%/(N 1) 0.1%, 400px, 100%) 사용합니다. 이를 통해 품목은 사용 가능한 공간을 채우도록 성장하지만 컨테이너 너비를 초과하지 않도록합니다.

정확하게 래핑을 제어합니다

항목이 랩을 할 때 제어하기 위해 clamp() 공식을 다음과 같이 수정합니다. clamp(100%/(N 1) 0.1%, (400px - 100vw)*1000, 100%) . 화면 너비 (100VW)가 400px를 초과하면 행당 N 항목이 있습니다. 400px 미만으로 행당 하나의 전체 폭을 얻습니다. 미디어 쿼리없이 효과적으로 중단 점을 생성합니다. 400px는 여기서 중단 점 역할을합니다.

여러 중단 점을 처리합니다

여러 항목 수 (예 : 행당 N에서 M 항목까지) 간의 전환을 관리하려면 clamp() 함수를 중첩시킵니다. clamp(clamp(100%/(N 1) 0.1%, (W1 - 100vw)*1000,100%/(M 1) 0.1%), (W2 - 100vw)*1000, 100%) . W1 및 W2는 중단 점을 나타냅니다. 이를 통해 단일 CSS 선언으로 정교한 반응 형 동작이 가능합니다. 추가 중첩은 이것을 더 많은 중단 점으로 확장합니다.

컨테이너 쿼리 시뮬레이션

100vw 100% 로 교체하면 컨테이너 쿼리를 시뮬레이션하여 레이아웃이 뷰포트 대신 컨테이너 폭에 응답 할 수 있습니다.

고급 기술

열 제어 외에도 요소 크기 또는 화면 크기를 기반으로 조건부 스타일을 만들 수 있습니다.

조건부 배경색 : 선형 그라디언트를 사용하여 요소 폭에 따라 배경색을 조건부로 변경할 수 있습니다.

 div {
  배경 : 선형 등급 (녹색 0) 0 / max (0px, 100px -100%) 1px, 빨간색;
}

요소 가시성 토글 : clamp() 및 overflow: hidden; .

요소 위치 변경 : clamp() 사용하여 화면 크기에 따라 요소 위치 (예 : top , left )를 동적으로 조정할 수 있습니다.

결론

미디어 쿼리는 여전히 가치가 있지만 이러한 기술은 정교한 반응 형 디자인을 달성하는 방법을 보여줍니다. 초점은 미디어 쿼리를 완전히 제거하는 것이 아니라 코드를 최적화하고 동적이고 반응이 높은 레이아웃을 생성하기위한 CSS의 기능을 활용하는 데 있습니다. 이러한 전략은 강력한 제어 및 청정 코드를 제공하여 유지 관리 및 효율성을 향상시킵니다.

위 내용은 반응 형 레이아웃, 미디어 쿼리가 적습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!