QQ 빌더로 CSS 수량 쿼리 생성

개발자에 대해 알고 있거나 사용하는 개발자가 거의 없음 CSS 수량 쿼리 그들의 웹 사이트에. 상당히 복잡한 기능이지만, 용기에 다양한 물건을 넣다..

수량 쿼리는 CSS 속성 변경 / 업데이트 ~에 근거하여 하위 요소에 대해 미리 정의 된 제한. 예를 들어, 3 개 이상의 항목 목록에서 방을 절약하기 위해 글꼴을 작게 만들 수 있습니다. 또 다른 예는 링크 너비 업데이트 를 기반으로 링크 수 탐색 메뉴에서.

이와 같은 작업을 수행 할 수 있습니다. 빨리 복잡 해지다. 하지만 덕분에 수량 쿼리 빌더 혼동스러운 구문을 암기 할 필요가 없습니다..

이 웹 앱 당신을 위해 모든 코드를 생성합니다. 시간을 절약 할 수 있습니다. 너는 ~해야 해. 세 가지 드롭 다운 메뉴에서 선택하십시오. 수량 쿼리를 사용자 정의합니다. 그들은 다음과 같이 작동합니다.

• 선택자 - 어떤 자식 요소가 세어 져야하는지
• 쿼리 유형 - ~ 중에서 선택 “많으면”, “적어도”, 또는 “많으면” & “적어도”
• 양 - 필터링 할 총 항목 수

이것은 코드에서 혼란스러워 보이지만 정말 간단한 개념입니다. CSS 속성을 적용 할 수있는 수량 쿼리 하위 요소의 총 수를 기반으로.

그래서 너는 할 수있어. 특정 CSS 스타일 추가 있을 때, 말하다., 적어도 4 개의 자식 요소 (4 개 이상). 아니면 스타일을 추가 할 때만 거기에 많으면 4 개의 하위 요소 (0-4 자).

콤보 셀렉터를 사용하면 최소 및 최대 어린이의 수 특정 CSS 속성을 표시하는 데 필요합니다..

위의 스크린 샷의 예에서 합계 “많으면” 항목 즉, 0, 1 또는 2 개의 하위가있을 때 블록이 빨간색임을 의미합니다. 3 명의 어린이를 얻으려고 하나 더 추가하면 모든 블록이 파란색으로 바뀝니다..

무슨 일이 벌어지고 있는지 전혀 모른다면 작은 정보 상자를 클릭하십시오. 사이드 바에서. 그것은 사실과 구문이있는 모달 창 수량 질의 기능 설명.

이것은 매우 유용한 도구입니다. 초보자와 숙련 된 개발자 모두. 그것은 많은 시간을 절약하다. 장기적으로 당신을 도울 것입니다. 보다 동적 인 웹 사이트 만들기.

시작하려면 QQ 작성기 웹 사이트를 방문하십시오. 기능 사용자 정의 시작. 너는 할 수있다. 결과가있는 장난감 과 실시간 미리보기 확인 오른쪽 창에서 변경 사항이 하위 요소에 미치는 영향을 확인하십시오..

이 프로젝트는 또한 GitHub에서 사용 가능 그래서 자유롭게 소스 코드를 확인하십시오. 또는 로컬에서 사본을 다운로드하십시오.. 그리고이 응용 프로그램을 좋아하거나 제작자 인 Drew Minns에 대한 질문이나 제안 사항이 있으면 빠른 짹짹 @drewisthe를 쏠 수 있습니다..