---
id: css-media-queries
title: "CSS Media Queries"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["@media rule", "media query", "responsive breakpoints", "min-width max-width CSS", "media types features"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "media-queries", "responsive", "at-rules"]
raw_sources: ["https://www.w3schools.com/css/css3_mediaqueries.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Media Queries]]

## 🎯 한 줄 통찰 (One-line insight)
CSS media queries apply styles conditionally based on a device's or environment's characteristics (such as viewport width), via the `@media` rule, making them essential for responsive web pages. [S1]

## 🧠 핵심 개념 (Core concepts)
- **What they do** — media queries allow you to apply styles based on the characteristics of the device or environment displaying the web page. [S1]
- **Why they matter** — they are essential for creating responsive web pages. [S1]
- **Mechanism** — the `@media` rule is used to implement media queries. [S1]
- **Media type is optional** — the media-type is optional unless you use `not`. [S1]
- **Combining conditions** — a query is true when the type matches and all listed features are true; `and` combines the type with features; `not` inverts the query. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Conditional style block** — wrap rules in `@media … { … }` so they apply only when the conditions match. [S1]
- **Mobile-then-up pattern** — use `min-width` to add styles as the viewport gets wider. [S1]
- **Range pattern** — combine `min-width` and `max-width` with `and` to target a width range. [S1]

## 📖 세부 내용 (Details)
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page, and are essential for creating responsive web pages. The `@media` rule is used to implement them. [S1]

**Media query syntax** [S1]
```css
@media [not] media-type and (media-feature: value) and (media-feature: value) {
  /* CSS rules to apply */
}
```
Key points: the media-type is optional unless using `not`; the query is true when the type matches and all features are true; `not` inverts the query; `and` combines the type with features. [S1]

**CSS media types** [S1]

| Value | Description |
|-------|-------------|
| `all` | All media type devices |
| `print` | Print preview mode |
| `screen` | Computer screens, tablets, smart-phones |

**CSS media features** [S1]

| Value | Description |
|-------|-------------|
| `max-height` | Maximum viewport height |
| `min-height` | Minimum viewport height |
| `height` | Viewport height (including scrollbar) |
| `max-width` | Maximum viewport width |
| `min-width` | Minimum viewport width |
| `width` | Viewport width (including scrollbar) |
| `orientation` | Landscape or portrait |
| `resolution` | Screen resolution |
| `prefers-color-scheme` | User's preferred color scheme (light/dark) |

**Example 1 — change background if viewport is 480px or wider** [S1]
```css
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
```

**Example 2 — change background if viewport is between 480px and 768px** [S1]
```css
@media screen and (min-width: 480px) and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}
```

## 🛠️ 적용 사례 (Applied in summary)
The page's applied examples set the `body` background to `lightgreen` once the viewport reaches `480px` (Example 1) and restrict that styling to the `480px–768px` range using `and` with both `min-width` and `max-width` (Example 2). No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Width-up rule (language: CSS):
```css
@media screen and (min-width: 480px) {
  body { background-color: lightgreen; }
}
```
Width-range rule (language: CSS):
```css
@media screen and (min-width: 480px) and (max-width: 768px) {
  body { background-color: lightgreen; }
}
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Media Queries Examples]], [[CSS Variables in Media Queries]], [[CSS Flexbox]], [[CSS Box Sizing]]
- **참조 맥락:** Referenced whenever styles must adapt to viewport size, orientation, print, or user color-scheme preference.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Media Queries — https://www.w3schools.com/css/css3_mediaqueries.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Media Queries" page (Astra wiki-curation, P-Reinforce v3.1 format).