빠른 팁 : 탄력성 CSS 구성 요소 배송

이 기사는 CSS의 컨테이너 쿼리가 내장 레이아웃 변형으로 탄력적이고 재사용 가능한 구성 요소를 만드는 방법을 보여줍니다. 이 예제는 다른 화면 크기에 적응하는 구독 양식에 중점을 둡니다.

이 양식은 레이아웃 유연성을 위해 CSS 그리드를 사용합니다. 3 개의 그리드 영역 (범례, 필드, 제출)이 정의되며 컨테이너 쿼리를 사용한 컨테이너 폭에 따라 배열 변경이 변경됩니다. 비디오는 레이아웃 조정을 보여줍니다.

요소는 를 사용하여 컨테이너로 지정됩니다. 중첩

div는 컨테이너 쿼리의 대상이됩니다. 두 번째 쿼리 ()는 더 큰 화면의 레이아웃을 조정합니다.

다른 비디오는 반응 형 동작을 보여줍니다

.subscription-form Codepen 데모는 라이브 대화식 예제를 제공합니다. 이 접근법은 재사용 가능하고 적응 가능한 CSS 구성 요소를 생성하기위한 컨테이너 쿼리의 전력을 보여줍니다. 이 발췌문은 container-type: inline-size;에서 CSS .form__content

<code class="language-css">.subscription-form {
  container-type: inline-size;
}

.form__content {
  display: grid;
  gap: 1rem;
}</code>

위 내용은 빠른 팁 : 탄력성 CSS 구성 요소 배송의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!