어떤 중단점을 사용해야 합니까?

레이아웃에 실제로 필요한 것만. 장치 목록을 복사하는 대신 문제가 보일 때까지 창 범위를 좁히고 거기에 중단점을 설정하세요.

모바일 우선으로 작성해야 할까요, 아니면 데스크톱 우선으로 작성해야 할까요?

모바일 우선: 좁은 화면에 대한 일반 규칙, 복잡성을 추가하는 최소 너비 쿼리. 그러면 휴대폰 케이스는 깨지지 않는 케이스가 됩니다.

미디어 쿼리는 너비 외에 무엇을 감지할 수 있나요?

색 구성표 기본 설정, 모션 감소 기본 설정, 인쇄, 포인터 정밀도 및 호버 기능. 그 중 일부는 너비보다 더 중요합니다.

미디어 쿼리를 완전히 피할 수 있나요?

종종 레이아웃을 위해. 자동 맞춤 그리드와 유형에 대한 클램프()는 중단점 없이 가장 반응이 빠른 동작을 처리합니다.

CSS 미디어 쿼리: 기능 및 필요한 양을 줄이는 방법

CSS 미디어 쿼리는 조건이 true인 경우에만 규칙 블록을 적용합니다. 즉, 뷰포트의 너비가 최대 700px이고, 페이지가 인쇄되고 있으며, 독자가 어두운 색상이나 움직임 감소를 요청한 경우입니다.

이는 두 번째 페이지 없이 한 페이지가 조정되는 방식이며, 장치 너비 목록에서 중단점을 복사할 때 깨지기 쉬운 CSS의 소스이기도 합니다.

이 가이드에서는 모바일 우선 작성, 장치가 아닌 레이아웃에서 중단점 선택, 모든 문서에 있어야 하는 인쇄 및 다크 모드 쿼리, 그리고 대부분의 너비 쿼리를 완전히 제거하는 두 가지 기술인 자동 맞춤 그리드 및 클램프()에 대해 다룹니다.

.cards { grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

기본적으로 하나의 열입니다. 공간이 있으면 세 개. 이는 모바일 우선 형태이며 순서가 중요합니다. 간단한 경우가 기본값이므로 쿼리가 실패하면 페이지를 사용할 수 있게 됩니다.

모바일 우선 미디어 쿼리 작성

/* mobile first — recommended */
.side { display: none; }
@media (min-width: 900px) { .side { display: block; } }

/* desktop first — avoid */
.side { display: block; }
@media (max-width: 899px) { .side { display: none; } }

미디어 쿼리는 조건이 충족되는 경우에만 CSS 블록을 적용합니다. 화면이 좁고, 페이지가 인쇄되고 있으며, 독자가 어두운 색상을 선호합니다. 페이지 구조는 동일하게 유지됩니다. 규칙이 변경됩니다.

둘 다 작동합니다. 첫 번째는 더 안전합니다. 쿼리가 일치하지 않더라도 독자는 여전히 작동하는 단일 열 페이지를 얻습니다. 두 번째에서는 실패한 쿼리로 인해 휴대폰의 데스크톱 레이아웃이 남습니다.

화면에 맞춰진 페이지는 모든 장치에서 읽혀집니다. 하나의 너비에 맞춰 제작된 하나는 하나로 읽혀집니다.

장치 목록이 아닌 레이아웃에서 중단점을 선택하세요.

휴대폰 및 태블릿 너비 목록을 복사하면 디자인의 어떤 것과도 일치하지 않는 중단점을 유지할 수 있으며 레이아웃이 실제로 실패하는 너비가 누락됩니다.

대신: 창을 천천히 좁히세요. 뭔가 잘못된 것처럼 보이는 곳이 중단점입니다. 대부분의 페이지에는 한두 개가 필요합니다.

너비가 아닌 쿼리

색 구성표

@media (prefers-color-scheme: dark) {
  :root { --bg: #18181b; --fg: #e7e7ea; --line: #333; }
}

너비 쿼리보다 더 가치 있는 것은 분명합니다. 많은 독자들이 전화기를 어둡게 설정하고 이를 무시한 페이지가 밤에 흰색 직사각형으로 도착합니다. 다크 모드 CSS를 참조하세요.

움직임 감소

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

어떤 사람들은 시차와 큰 전환으로 인해 멀미를 앓습니다. 이는 세 줄로 구성되며, 추가할 수 있는 가장 높은 값의 단일 접근성 규칙입니다.

인쇄

@media print {
  nav, button { display: none; }
  body { min-height: auto; }
  table { break-inside: avoid; }
}

인쇄 스타일시트를 참조하세요.

포인터 정밀도

@media (hover: none) {
  .tooltip { display: none; }   /* nothing hovers on a touchscreen */
}
@media (pointer: coarse) {
  button { min-height: 44px; }  /* fingers need a bigger target */
}

화면 너비에서 터치를 추론하는 것보다 더 정확합니다. 터치스크린 노트북은 넓고 포인터가 굵습니다.

더 적은 수가 필요함

두 가지 최신 기능은 대부분의 너비 쿼리를 제거합니다.

자동 맞춤 그리드

/* no query needed at all */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

브라우저는 170px를 수용할 수 있는 만큼의 열을 맞춥니다. 노트북에 4개, 휴대폰에 1개. CSS 그리드를 참조하세요.

유형에 대한 클램프()

h1 { font-size: clamp(24px, 5vw, 40px); }
body { font-size: clamp(15px, 2vw, 16.5px); }

최소값, 뷰포트에 따라 크기가 조정되는 크기 및 최대값입니다. 두 쿼리에 대한 세 가지 규칙 대신 요소당 한 줄입니다.

결합 조건

@media (min-width: 700px) and (max-width: 1100px) { … }
@media (min-width: 700px), print { … }          /* comma = or */
@media not all and (prefers-color-scheme: dark) { … }

긴 조합을 작성하는 경우 레이아웃이 어려울 수 있습니다. 대신 자동 맞춤 그리드를 사용하세요.

테스트

장치 에뮬레이터를 사용하는 대신 브라우저 창의 범위를 좁힙니다. 더 빠르며 몇 가지 사전 설정이 아닌 모든 너비를 테스트합니다. 대략 360px는 작은 휴대폰이고 너비는 확신할 가치가 있습니다.

어떤 작업에 대한 어떤 쿼리

쿼리	감지하는 내용	사용할만한 가치가 있는
`min-width`	뷰포트 너비	예, 레이아웃 변경의 경우
`prefers-color-scheme`	밝거나 어두운 선호	예 - 다크 모드를 참조하세요.
`prefers-reduced-motion`	모션 감도	응 세 줄이야
`print`	인쇄 또는 PDF 내보내기	예 - 인쇄 스타일시트를 참조하세요.
`hover: none`	호버 기능 없음	예, 툴팁용입니다.
`pointer: coarse`	마우스보다는 손가락	예, 대상 크기의 경우
`orientation`	세로 또는 가로	드물게 — 너비는 일반적으로 의미한 것입니다.
`max-width` 장치 사전 설정	유용한 것이 없습니다.	아니요 - 레이아웃에서 중단점을 선택하세요.

맨 아래 줄은 버려야 할 습관입니다. 복사된 장치 너비 목록은 실제로 실패하는 너비를 놓치면서 디자인의 어떤 것과도 일치하지 않는 중단점을 유지하는 것을 의미합니다.

자신만의 중단점 찾기

브라우저 창을 천천히 좁혀서 시청해 보세요. 뭔가 잘못되어 보이는 첫 번째 너비가 첫 번째 중단점입니다. 대부분의 페이지에는 한두 개가 필요합니다.

4~5개가 필요한 경우 레이아웃이 문제가 됩니다. 자동 맞춤 그리드 및 유형 크기에 대한 clamp()가 일반적으로 모든 항목을 대체합니다.

모든 문서가 전달해야 하는 세 가지 쿼리

@media print는 탐색 및 버튼을 숨기고, 행과 카드가 페이지 간에 분할되지 않도록 하며, 링크 텍스트 뒤에 링크 주소를 인쇄합니다. 인쇄 스타일시트에 블록이 있습니다. @media (prefers-color-scheme: dark)는 네 가지 색상 변수를 교환하여 페이지가 독자의 설정을 따르도록 합니다. @media (prefers-reduced-motion: reduce)는 요청한 독자를 위해 애니메이션을 끕니다.

세 가지 중 어느 것도 너비에 관한 것이 아니며 모두 합쳐서 약 15줄입니다.

장치 목록의 중단점이 잘못된 이유

휴대폰 및 태블릿 너비 목록은 게시된 연도에 최신 정보가 아니며 레이아웃에 대해 아무 것도 알려주지 않습니다.

올바른 중단점은 콘텐츠가 더 이상 맞지 않는 지점입니다. 2열 레이아웃이 좁아 보일 때까지 창을 넓힌 다음 거기에 쿼리를 넣습니다. 일반적으로 이는 6개가 아닌 1개 또는 2개의 중단점을 생성하며 자동 맞춤 그리드는 이러한 중단점 대부분을 제거합니다.

미디어 쿼리를 효과적으로 사용하기: 4단계

쿼리 없이 좁은 레이아웃을 먼저 작성하세요. 360px에서 읽을 수 있는 열 1개. 이것이 모든 장치가 얻는 기반입니다.
레이아웃에서 더 많은 공간을 사용할 수 있는 min-width 쿼리를 추가하세요. 장치 목록에서 복사한 너비가 아닌 두 번째 열이 실제로 도움이 되는 경우입니다.
인쇄 및 어두운 모드 쿼리를 추가합니다. @media print는 탐색을 숨기고 행 전체를 유지합니다. prefers-color-scheme는 색상 변수를 바꿉니다.
가능한 경우 너비 쿼리를 그리드 자동 맞춤 및 clamp()로 대체하세요. 대부분의 카드 레이아웃과 유형 크기에는 쿼리가 전혀 필요하지 않습니다. CSS 그리드가 래핑을 수행합니다.

CSS 미디어 쿼리 및 필요한 쿼리 수를 줄이는 방법