Media query क्या है - ldkalink
CSS Media query kya hai: जब कभी भी आप अपने वेबसाइट या ब्लॉग के लिए कोई वेब पेज क्रिएट करते हैं तो सीएसएस कोडिंग में आपको Responsive Web Design के लिए Media queries की जरूरत पड़ती है।
आखिर सीएसएस में मीडिया क्वेरी क्या होता है इसका उपयोग क्यों और कैसे किया जाता है इन सारे सवालों का जवाब आज के इस आर्टिकल में www.ldkalink.com हम जानने वाले हैं।
 |
| CSS Media query क्या है |
Media query क्या है?
What is media query in Hindi: मीडिया क्वेरी एक सीएसएस तकनीक है जिसका उपयोग अलग-अलग स्क्रीन साइज पर कंटेंट को एडजस्ट करने के लिए किया जाता है।
अलग-अलग डिवाइस का अलग-अलग साइज होने के कारण कंटेंट को प्रॉपर तरीके से दिखाने के लिए मीडिया क्वेरी का उपयोग किया जाता है।
मीडिया क्वेरी जो की अलग-अलग डिवाइस के लिए एक रेस्पॉन्सिव डिजाइन क्रिएट करता है यदि हम इसका उपयोग करते हैं तो इसके साइज के अनुसार यह ऑटोमेटिक एडजस्ट होते जाता है।
Media query का उपयोग हम अलग-अलग तरह के डिवाइस जैसे कि स्मार्टफोन, टैबलेट, डेस्कटॉप आदि के लिए कर सकते हैं।
इन डिवीजन की साइज के अनुसार ऑटोमेटिक कंटेंट सेट की जाए जैसे ही हम डेस्कटॉप मोड से मोबाइल डिवाइस में आते हैं तो यह ऑटोमेटिक इसके साइज के अनुसार इसका लेआउट रिस्पांसिबल डिजाइन में बदल देता है।
अब आपको Media query का मतलब क्या है अब तो अच्छे से समझ आ गया होगा, पर यह किस तरह से कार्य करता है कैसे हम इसका उपयोग करते हैं इन सारी बातों को अभी बिस्तर से समझने वाले हैं ।
Syntax
@media media-type and (media-feature) {/* CSS rules here */}
एक media query में Media-type या एक या एक से अधिक एक्सप्रेशन को चेक करने के लिए कंडीशन अप्लाई करते हैं जैसे कि इसका विड्थ, हाइट, रेसोलुशन आदि।
Common media types
इस Media-type की जगह हम क्या-क्या यूज़ कर सकते हैं इसके बारे में अब हम जान लेते हैं:
'all' - यह सभी तरह के डिवीजन के लिए इस सूटेबल होता है।
'print' - यह प्रिंट प्रीव्यू मोड में एक स्क्रीन पर दिखे डॉक्यूमेंट इसके लिए इसका उपयोग किया जाता है।
'screen' - मुख्य रूप से यह स्क्रीन के लिए उपयोग किया जाता है।
Examples of media features
'width and height' - यह view port की हाइट और चौड़ाई को बताता है।
'min-width and max-width' - यह स्क्रीन के मिनिमम विथ और मैक्सिमम विथ के साइज को रिपोर्ट करता है।
'orientation' - यह डिवाइस के ओरिएंटेशन portrait या landscape को बताता है।
'reservation' - यह डिवाइस के रेजोल्यूशन को बताता है डॉट पर इंच डीपी (DPI)या डॉट पर सेंटीमीटर में (DPCM)
Example and usage
नीचे दिए गए एग्जांपल में यह बैकग्राउंड कलर को चेंज कर देता है बॉडी को लाइट ब्लू में, इसका साइज इस तरह से चेंज होने लगेगा जब जब इसकी साइज यानी इसकी चौड़ाई 600 पिक्सल या इससे कम होगी।
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Complex example
यदि हम चाहते हैं कि स्क्रीन के साइज के अनुसार हम इसके फॉण्ट को भी चेंज करें तो हम इस तरह के कोड का उपयोग कर सकते हैं।
/* Default styles */
body {
font-size: 16px;
}
/* For screens that are 600px wide or less */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* For screens that are between 600px and 1200px */
@media screen and (min-width: 601px) and (max-
width: 1200px) {
body {
font-size: 18px;
}
}
/* For screens that are more than 1200px wide */
@media screen and (min-width: 1201px) {
body {
font-size: 20px;
}
}
/* For devices in portrait orientation */
@media screen and (orientation: portrait) {
body {
font-size: 16px;
}
Combining media queries
Media query का उपयोग करते समय हम मल्टीप्ल कंडीशंस भी अप्लाई कर सकते हैं लॉजिक ऑपरेटर से जैसे की 'and', 'not', 'only'.
/* Styles for screens larger than 600px and in
landscape orientation */
@media screen and (min-width: 600px) and
(orientation: landscape) {
body {
background-color: lightgreen;
}
}
Using media curious in HTML
Media query का उपयोग css में तो करते ही हैं इसके अलावा एचटीएमएल में भी हम स्टाइलटैग के अंदर इसका उपयोग कर सकते है।
Inline in HTML
<style>
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
Linking external style sheets
<link rel="stylesheet" href="styles.css" media="screen and (max-width: 600px)">
मीडिया क्वेरी एक तरह से एक पॉवरफुल टूल की तरह है जो एक रेस्पॉन्सिव डिजाइंस क्रिएट करके हमें देता है वह भी बहुत बढ़िया स्टाइल में, इसके उपयोग से यूजर एक्सपीरियंस काफी अच्छा होता है यानी यूजर को किसी तरह की कोई परेशानी उनके डिवाइस में नहीं आता जिससे कि वह कंटेंट को बड़ी आसानी से अच्छे तरीके से रीड कर सकता हैं।