2nd/10_Wiki/Topic_CSS/CSS_RWD_Media_Queries.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-rwd-media-queries	CSS RWD Media Queries	Frontend	draft	conceptual		media queries @media rule breakpoints RWD media queries responsive breakpoints		B	0.9	2026-06-23	2026-06-23			css web frontend w3schools responsive media-queries	https://www.w3schools.com/css/css_rwd_mediaqueries.asp

CSS RWD Media Queries

🎯 한 줄 통찰 (One-line insight)

CSS media queries use the @media rule to apply different styles based on a device's characteristics (such as viewport width or orientation), letting one stylesheet rearrange layout, hide elements, and adapt across breakpoints. [S1]

🧠 핵심 개념 (Core concepts)

• Media query — 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. [S1]
• @media rule — the rule used to implement media queries in a stylesheet. [S1]
• Breakpoint — a viewport width at which the layout changes; styles inside a @media (min-width: ...) or (max-width: ...) block take effect once that condition is met. [S1]
• Orientation — queries can target orientation: landscape (or portrait). [S1]
• Conditional visibility — media queries can hide elements (display: none) at certain widths. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Min-width breakpoints — start with a base/mobile layout, then add @media (min-width: X) blocks that progressively rearrange the grid for larger screens. [S1]
• Standard device breakpoints — reuse a known set of breakpoints (600 / 768 / 992 / 1200 px) rather than ad-hoc values. [S1]
• Orientation-aware styling — switch styles between landscape and portrait with an orientation query. [S1]

📖 세부 내용 (Details)

What is a Media Query? CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. They are essential for creating responsive web pages. Media queries are implemented with the @media rule. [S1]

Add a Breakpoint — A breakpoint at 600px rearranges the grid areas once the viewport is at least that wide: [S1]

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}

Another Breakpoint — Stacking two breakpoints (600px and 768px) produces a distinct tablet view and desktop view: [S1]

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 3 / span 6;}
  .footer {grid-area: 4 / span 6;}
}

@media (min-width: 768px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}

Typical Device Breakpoints — There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups: [S1]

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Orientation: Portrait / Landscape — Media queries can also be used to change the layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation: [S1]

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Hide Elements With Media Queries — Another common use of media queries is to hide elements on different screen sizes: [S1]

/* Hide element if the viewport width is 600px or less */
@media screen and (max-width: 600px) {
  #div1 {
    display: none;
  }
}

Note: the page also mentions practical applications such as resizing fonts and respecting prefers-reduced-motion user preferences; the exact inline code for those was not captured beyond the examples above — Not found in source. [S1]

🛠️ 적용 사례 (Applied in summary)

The breakpoint examples above rearrange the grid layout from the CSS RWD Grid View lesson (header/menu/content/facts/footer) as the viewport grows, and demonstrate hiding #div1 and switching the body background on landscape. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Single min-width breakpoint (language: CSS):

@media (min-width: 600px) {
  /* styles that apply at 600px and wider */
}

Hide an element below a width (language: CSS):

@media screen and (max-width: 600px) {
  #div1 {
    display: none;
  }
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• min-width vs max-width — min-width styles apply at the given width and wider (mobile-first, additive); max-width styles apply at the given width and narrower (desktop-first). The typical-breakpoints listing pairs max-width: 600px for the extra-small group with min-width queries for all larger groups. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS RWD Grid View, CSS RWD Viewport, CSS RWD Images
• 참조 맥락: The mechanism that adapts a grid layout across the standard device breakpoints in responsive design.

📚 출처 (Sources)

• [S1] W3Schools — CSS RWD Media Queries — https://www.w3schools.com/css/css_rwd_mediaqueries.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS RWD Media Queries" page (Astra wiki-curation, P-Reinforce v3.1 format).