CSS Media Queries

किसी restaurant menu को design करने की कल्पना करें। एक बड़े, double-page board पर, आप high-definition photos, descriptions, और price grids को साथ-साथ साफ़ तरीके से दिखा सकते हैं। लेकिन अगर आप उसी layout को एक छोटे pocket pamphlet पर print करने की कोशिश करें, तो text unreadable हो जाता है। आपको layout को simplify करना होगा, sidebars हटाने होंगे, और options को एक single column में stack करना होगा। CSS media queries वही layout adjustments हैं। ये आपकी website designs को user की screen width के आधार पर automatically adapt, resize, और morph होने देती हैं, desktops, tablets, और smartphones पर एक साफ़, responsive layout देते हुए।

In this page:

Media Query Syntax
Mobile-First Design (min-width)
Desktop-First Design (max-width)
Common Device Breakpoints
कई Media Conditions को Combine करना

Syntax

css

@media media-type and (condition) {
  selector {
    property: value;
  }
}

Media Query Syntax

Media queries CSS में conditional statements हैं। इनमें एक media type (जैसे screen) और features (जैसे min-width) होते हैं, जो आपको specific layout rules लागू करने देते हैं जब browser window एक defined pixel threshold पार कर जाए।

Note: standard digital devices को target करने के लिए हमेशा अपना media type screen specify करें।

Warning: सुनिश्चित करें कि आप and keyword और अपनी query parentheses के बीच ज़रूरी space शामिल करते हैं, वरना browser rule को नज़रअंदाज़ कर देगा।

उदाहरण: Media Query Syntax

css

<style>
@media screen and (min-width: 768px) {
  .container {
    width: 720px;
  }
}
</style>
<div class="container" style="background:#cde; border:1px solid #369">Width becomes 720px at 768px+ viewports.</div>

Mobile-First Design (min-width)

Mobile-first design industry standard workflow है। आप पहले छोटे mobile screens के लिए अपनी default styles लिखते हैं, फिर screen sizes बढ़ने पर layout columns और spacing जोड़ने के लिए min-width queries इस्तेमाल करते हैं।

Note: एक mobile-first workflow इस्तेमाल करने से हल्की, साफ़, और तेज़ stylesheets मिलती हैं।

Warning: mobile-first design न करना heavy desktop assets पहले load होने की वजह से mobile connections पर आपके pages को धीमा बना सकता है।

उदाहरण: Mobile-First Design (min-width)

css

<style>
.box {
  display: block;
}
@media (min-width: 768px) {
  .box {
    display: flex;
  }
}
</style>
<div class="box" style="background:#cde"><div style="background:#fdc; padding:8px">A</div><div style="background:#cfc; padding:8px">B</div></div>

Desktop-First Design (max-width)

Desktop-first design एक alternative workflow है जहाँ आप पहले बड़े desktop screens के लिए अपनी default styles लिखते हैं, फिर screen sizes छोटे होने पर elements adjust, shrink, और stack करने के लिए max-width queries इस्तेमाल करते हैं।

Note: पुरानी, मौजूदा desktop websites को mobile screens के लिए adapt करने के लिए max-width queries इस्तेमाल करें।

Warning: Desktop-first workflows को अक्सर mobile पर desktop styles reset करने के लिए complex code overrides लिखने पड़ते हैं।

उदाहरण: Desktop-First Design (max-width)

css

<style>
.box {
  display: flex;
}
@media (max-width: 768px) {
  .box {
    display: block;
  }
}
</style>
<div class="box" style="background:#cde"><div style="background:#fdc; padding:8px">A</div><div style="background:#cfc; padding:8px">B</div></div>

Common Device Breakpoints

अपनी responsive designs को consistent बनाने के लिए, आपको अपने media query breakpoints को standard, widely used device widths (जैसे mobile के लिए 480px, tablets के लिए 768px, और desktops के लिए 1024px) के साथ align करना चाहिए।

Note: specific phone models को target करने की कोशिश करने के बजाय पहले अपने content के layout breakpoints पर focus करें।

Warning: सुनिश्चित करें कि आपके breakpoints ऐसे visual layout gaps न छोड़ें जहाँ unusual screen sizes पर elements overlap हों।

उदाहरण: Common Device Breakpoints

css

<style>
@media (min-width: 480px) { .box { padding: 12px; } }
@media (min-width: 768px) { .box { padding: 20px; } }
@media (min-width: 1024px) { .box { padding: 32px; } }
</style>
<div class="box" style="background:#cde; border:1px solid #369">Padding grows as the viewport widens.</div>

कई Media Conditions को Combine करना

आप specific screen ranges (जैसे 600px और 900px wide के बीच के devices) target करने के लिए and और comma (जो or की तरह काम करता है) operators इस्तेमाल करके कई media features combine कर सकते हैं।

Note: mobile या desktop screens को असर किए बिना tablet displays के लिए specific target styling rules लागू करने के लिए range queries इस्तेमाल करें।

Warning: सुनिश्चित करें कि आपकी range boundaries overlap न करें, क्योंकि यह एक ही screen पर contradictory styles चला सकता है।

उदाहरण: Combining Multiple Media Conditions

css

<style>
@media (min-width: 600px) and (max-width: 900px) {
  .box {
    background: lightblue;
  }
}
</style>
<div class="box" style="border:1px solid #369; padding:12px">Light blue only between 600px and 900px wide.</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Box Sizing Next Lesson → CSS Pointer Events