2nd/10_Wiki/Topic_CSS/CSS_Media_Queries_Examples.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-media-queries-examples	CSS Media Queries Examples	Frontend	draft	conceptual		media query examples responsive layout examples responsive columns responsive navigation menu hide element responsive		B	0.87	2026-06-23	2026-06-23			css web frontend w3schools media-queries responsive flexbox	https://www.w3schools.com/css/css3_mediaqueries_ex.asp

CSS Media Queries Examples

🎯 한 줄 통찰 (One-line insight)

Media queries are a popular technique for delivering a tailored style sheet to different devices — switching background colors, reflowing columns, stacking navigation, hiding elements, and respecting user preferences at breakpoints. [S1]

🧠 핵심 개념 (Core concepts)

• Purpose — media queries are a popular technique for delivering a tailored style sheet to different devices. [S1]
• Breakpoint-driven layout — combining @media with flexbox lets grids change column counts and stack at smaller widths. [S1]
• Direction switching — flex-direction: column inside a query converts horizontal navigation/columns into vertical stacks on small screens. [S1]
• Conditional visibility — display: none inside a query hides elements below a width. [S1]
• Beyond width — queries can target orientation and user preferences like prefers-reduced-motion. [S1]
• The page directs readers to the Responsive Web Design Tutorial for deeper learning. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Mobile-first color tiering — set a base style, then upgrade it at min-width: 768px and min-width: 992px. [S1]
• Reflowing flex grid — flex: 25% columns drop to flex: 50% at max-width: 992px, then stack via flex-direction: column at max-width: 600px. [S1]
• Collapse-to-stack navigation — a display: flex menu becomes vertical with flex-direction: column at max-width: 600px. [S1]
• Hide / resize at breakpoint — display: none or a larger font-size keyed to a width. [S1]
• Preference-aware styling — orientation: landscape and prefers-reduced-motion: reduce. [S1]

📖 세부 내용 (Details)

Media queries are a popular technique for delivering a tailored style sheet to different devices. The page presents several practical examples. [S1]

Example 1 — background color across breakpoints [S1]

/* Base style for mobile devices */
body {
  background-color: olive;
  color: white;
}

/* For devices with a minimum width of 768px (Medium) */
@media screen and (min-width: 768px) {
  body {
    background-color: blue;
    color: white;
  }
}

/* For devices with a minimum width of 992px (Large) */
@media screen and (min-width: 992px) {
  body {
    background-color: tan;
    color: black;
  }
}

Example 2 — flexible columns layout [S1]

* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other */
@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Example 3 — responsive navigation menu [S1]

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}

/* For viewport width 600px or less, make the menu links stack on top of each other */
@media screen and (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}

Example 4 — hide elements [S1]

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

Example 5 — change font size [S1]

/* If viewport width is 600px or more, set font-size to 80px */
@media screen and (min-width: 600px) {
  #div1 {
    font-size: 80px;
  }
}

Example 6 — screen orientation [S1]

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

Example 7 — user preferences (reduced motion) [S1]

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

🛠️ 적용 사례 (Applied in summary)

The page's applied examples are: a tiered body background (olive → blue at 768px → tan at 992px); a four-column flex grid that becomes two columns at 992px and stacks at 600px; a horizontal nav that stacks vertically at 600px; hiding #div1 below 600px; enlarging #div1 font to 80px at 600px+; a landscape-orientation background; and a reduced-motion rule disabling animations/transitions. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Reflowing flex grid (language: CSS):

.container { display: flex; flex-wrap: wrap; }
.column { flex: 25%; padding: 20px; }
@media screen and (max-width: 992px) { .column { flex: 50%; } }
@media screen and (max-width: 600px) { .container { flex-direction: column; } }

Respect reduced-motion preference (language: CSS):

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

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

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Media Queries, CSS Flexbox, CSS Box Sizing, CSS Variables in Media Queries
• 참조 맥락: Referenced for concrete responsive recipes — column reflow, menu stacking, conditional hiding, and preference-aware styling.

📚 출처 (Sources)

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

📝 변경 이력 (Change history)

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