CSS의 컨테이너 쿼리

먼저 컨테이너를 등록하고 쿼리할 수 있어야 합니다.

컨테이너 등록

선택기를 사용하여 컨테이너를 등록하세요.

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

또는 단축 옵션을 사용하세요

.parent {
    container: myname / inline-size;
    ... other code
}

등록 시 유형과 이름이라는 두 가지 세부 사항을 지정해야 합니다.

컨테이너 유형

컨테이너 유형: ...

• 사이즈
• 인라인 크기
• 보통

컨테이너 이름

컨테이너 이름: <컨테이너 이름>;

<컨테이너 이름> 컨테이너가 여러 개 있는 경우에 특히 유용한 컨테이너를 식별합니다.

컨테이너 쿼리

컨테이너 쿼리는 @container at-규칙으로 시작하고 그 뒤에 컨테이너 이름과 기능 쿼리가 옵니다.

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

피처 너비가 30ch보다 큰 경우 myname 컨테이너 내부 div의 글꼴 크기를 3em으로 설정하는 컨테이너 쿼리

쿼리할 기능

크기 쿼리...

• 너비
• 키
• 인라인 크기
• 블록 크기
• 가로세로 비율
• 오리엔테이션

스타일 쿼리...

• 스타일(속성: 값)

값을 확인할 속성입니다.

예를 들어

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

컨테이너 contname의 배경색이 파란색인 경우 스타일을 적용하는 컨테이너 쿼리

복합 쿼리

and, or 및 not을 사용하여 복합 쿼리를 생성할 수 있습니다

예를 들어

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

중첩된 컨테이너 쿼리

컨테이너 쿼리는 다른 컨테이너 쿼리 내에 중첩될 수 있습니다.

예를 들어

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }

위 내용은 CSS의 컨테이너 쿼리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!