새로운 CSS 미디어 쿼리 범위 구문

우리는 의존 CSS 미디어 쿼리 대상 조건에 따라 요소를 선택하고 스타일을 지정합니다. 그 조건은 모든 종류가 될 수 있지만 일반적으로 (1) 사용 중인 미디어 유형 및 (2) 브라우저, 장치 또는 사용자 환경의 특정 기능의 두 가지 진영으로 나뉩니다.

따라서 특정 CSS 스타일을 인쇄된 문서에 적용하고 싶다고 가정해 보겠습니다.

@media print {
  .element {
    /* Style away! */
  }
}

특정 뷰포트 너비에서 스타일을 적용할 수 있다는 사실은 Ethan Marcotte 이후 CSS 미디어 쿼리를 반응형 웹 디자인의 핵심 요소로 만들었습니다. 용어를 만들었다. 브라우저의 뷰포트 너비가 특정 크기인 경우 스타일 규칙 세트를 적용하면 브라우저의 크기에 반응하는 요소를 디자인할 수 있습니다.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

공지 사항 and 거기에? 그것은 우리가 문장을 결합할 수 있게 해주는 연산자입니다. 이 예에서는 미디어 유형이 screen 그리고 그것은 min-width 기능이 로 설정되었습니다. 30em (또는 이상). 다양한 뷰포트 크기를 타겟팅하기 위해 동일한 작업을 수행할 수 있습니다.

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

이제 이러한 스타일은 단일 너비가 아닌 명시적인 뷰포트 너비 범위에 적용됩니다!

그러나 미디어 쿼리 레벨 4 사양은 다음과 같은 일반적인 수학적 비교 연산자를 사용하여 뷰포트 너비 범위를 대상으로 하는 새로운 구문을 도입했습니다. <, >및 = — 더 적은 코드를 작성하면서 구문적으로 더 의미가 있습니다.

어떻게 작동하는지 알아보자.

새로운 비교 연산자

마지막 예는 다음을 사용하여 조건을 결합하여 "가짜" 범위를 분류하는 방법을 잘 보여줍니다. and 운영자. 미디어 쿼리 레벨 4 사양의 큰 변화는 값을 결합하는 대신 비교하는 새로운 연산자가 있다는 것입니다.

• < 값이 다음과 같은지 평가합니다. 이하 다른 가치
• > 값이 다음과 같은지 평가합니다. 보다 큰 다른 가치
• = 값이 다음과 같은지 평가합니다. 같은 다른 값으로
• <= 값이 다음과 같은지 평가합니다. 작거나 같은 to 다른 가치
• >= 값이 다음과 같은지 평가합니다. 크거나 같은 to 다른 가치

다음은 브라우저가 다음과 같은 경우 스타일을 적용하는 미디어 쿼리를 작성하는 방법입니다. 600px 폭 이상:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

비교 연산자를 사용하여 동일한 것을 작성하는 방법은 다음과 같습니다.

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

다양한 뷰포트 너비 타겟팅

종종 CSS 미디어 쿼리를 작성할 때 중단 점 — 디자인이 "깨진" 상태와 스타일 세트를 적용하여 수정하는 조건입니다. 디자인에는 많은 중단점이 있을 수 있습니다! 그리고 그들은 일반적으로 중단점이 시작되는 곳과 중단점이 끝나는 곳의 두 너비 사이에 있는 뷰포트를 기반으로 합니다.

다음은 다음을 사용하여 수행한 방법입니다. and 두 중단점 값을 결합하는 연산자:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Boolean을 버릴 때 미디어 쿼리를 작성하는 것이 얼마나 짧고 쉬운지 잘 이해하기 시작합니다. and 새로운 범위 비교 구문을 선호하는 연산자:

@media (400px <= width <= 1000px) {
  /* etc. */
}

훨씬 쉽죠? 그리고 이 미디어 쿼리가 정확히 무엇을 하고 있는지 분명합니다.

브라우저 지원

이 개선된 미디어 쿼리 구문은 이 글을 쓰는 시점에서 아직 초기 단계에 있으며 min-width 와 max-width. 그래도 우리는 가까워지고 있습니다! 현재로서는 Safari가 유일한 주요 버팀목이지만 그것에 대한 공개 티켓이 있습니다 당신이 따를 수 있습니다.

예를 하나 보자

다음은 데스크탑과 같은 더 큰 화면에 적합한 레이아웃입니다.

이 레이아웃에는 모든 중단점에 공통적인 기본 스타일이 있습니다. 그러나 화면이 좁아짐에 따라 태블릿에 휴대 전화에 이르기까지 이상적으로 적합한 다양한 작은 중단점에 조건부로 적용되는 스타일을 적용하기 시작합니다.

무슨 일이 일어나고 있는지 알아보기 위해 레이아웃이 두 ​​개의 작은 중단점 사이에서 어떻게 반응하는지 보여줍니다. 숨겨진 탐색 목록이 표시되고 title FBI 증오 범죄 보고서 main 에 증가한다 font-size.

해당 변경 사항은 뷰포트의 변경 사항이 한 미디어의 조건에서 다른 미디어 조건과 일치할 때 트리거됩니다.

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

우리는 우리가 다룬 몇 가지 개념을 결합했습니다! 우리는 screen 미디어 유형, 새로운 미디어 기능 범위 구문을 사용하여 뷰포트 너비가 특정 값보다 크거나 같은지 평가하고 두 조건을 다음과 결합합니다. and 연산자.

알겠습니다. 아래의 휴대기기에 적합합니다. 768px 및 다음과 같거나 더 큰 기타 장치의 경우 768px. 그러나 그 데스크탑 레이아웃은 어떻습니까? 우리는 어떻게 거기에 도달합니까?

레이아웃이 진행되는 한:

• XNUMXD덴탈의 main 요소는 12열 그리드가 됩니다.
• 이미지에 버튼이 표시됩니다.
• 크기는 .title 요소의 글꼴이 증가하고 이미지와 겹칩니다.

숙제를 완료하고 이러한 변경이 수행되어야 하는 위치를 정확히 결정했다고 가정하면 뷰포트가 일치할 때 해당 스타일을 적용할 수 있습니다. width 해당 중단점에 대한 조건입니다. 우리는 중단점이 에 있다고 말할 것입니다. 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

가지고 놀아보세요:

새로운 구문이 더 이해하기 쉬운 이유

결론: 비교 연산자를 구별하는 것이 더 쉽습니다(예: width >= 320px)의 차이점을 말하는 것보다 min-width 와 max-width 를 사용하여 and 운영자. 사이의 뉘앙스를 제거하여 min- 와 max-, 우리는 하나의 싱글이 있습니다 width 작업할 매개변수와 운영자가 나머지를 알려줍니다.

이러한 구문의 시각적 차이점 외에도 약간 다른 작업을 수행합니다. 사용 min- 와 max- 수학 비교 연산자를 사용하는 것과 같습니다.

• max-width 에 해당 <= 연산자(예: (max-width: 320px) 와 동일합니다 (width <= 320px)).
• min-width 에 해당 >= 연산자(예: (min-width: 320px) 와 동일합니다 (width >= 320px)).

어느 쪽도 다음과 동일하지 않습니다. > or < 연산자.

중단점을 기반으로 다양한 스타일을 정의하는 미디어 쿼리 레벨 4 사양에서 직접 예제를 가져오겠습니다. 320px 다음을 사용하여 뷰포트 너비에서 min-width 와 max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

두 미디어 쿼리는 표시 영역 너비가 다음과 같을 때 조건과 일치합니다. 320px. 그것은 우리가 원하는 것이 아닙니다. 우리는 원한다 중 두 조건을 동시에 사용하는 것이 아니라 이러한 조건 중 하나를 선택합니다. 이러한 암시적 변경을 피하기 위해 다음을 기반으로 쿼리에 픽셀을 추가할 수 있습니다. min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

이렇게 하면 뷰포트 너비가 다음과 같을 때 두 스타일 세트가 동시에 적용되지 않습니다. 320px, 다음 사이에 있는 모든 뷰포트 너비 320px 와 321px 결과적으로 두 쿼리의 스타일 중 어느 것도 적용되지 않는 아주 작은 영역이 생성됩니다. 즉, 이상한 "스타일이 지정되지 않은 콘텐츠의 플래시" 상황입니다.

한 가지 해결책은 두 번째 비교 척도 값(소수점 뒤의 숫자)을 다음으로 늘리는 것입니다. 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

그러나 그것은 어리석고 지나치게 복잡해지고 있습니다. 이것이 새로운 미디어 기능 범위 구문이 더 적절한 접근 방식인 이유입니다.

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

최대 포장

휴, 우리는 CSS 미디어 쿼리에서 뷰포트 너비 범위를 대상으로 하는 새로운 구문에 대해 많은 내용을 다루었습니다. 이제 Media Queries Level 4 사양이 구문을 도입하고 Firefox 및 Chromium 브라우저에 채택되었으므로 새로운 비교 연산자를 사용하고 이를 다른 범위의 미디어 기능과 결합할 수 있게 되었습니다. width, 처럼 height 와 aspect-ratio

이는 레벨 4 사양이 도입한 새로운 기능 중 하나일 뿐입니다. 사용자 기본 설정에 따라 만들 수 있는 쿼리 모음. 여기서 끝이 아닙니다! 체크 아웃 CSS 미디어 쿼리에 대한 완전한 가이드 몰래 들여다보기 위해 미디어 쿼리 레벨 5에 포함될 수 있는 것.