Introduction to Media Queries In Hindi
एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी ऐट्रिब्यूट्स को एक रिस्पॉन्सिव वेबसाइट डिज़ाइन एलिमेंट के लिए एक फंडामेंटल कांसेप्ट है. सीएसएस मीडिया क्वेरी फीचर्स वेब डेवलपर को यूजर स्पेसिफिक इलेक्ट्रॉनिक डिवाइस और गैजेट्स के अनुसार, जैसे डिफरेंट डिवाइस स्क्रीन साइज, स्क्रीन पिक्सेल रिज़ॉल्यूशन, डिवाइस ओरिएंटेशन, और अन्य वेब इम्पोर्टेन्ट एलिमेंट के आधार पर यूजर कस्टम वेबपेज वेबसाइट में मल्टीप्ल कांसेप्ट अप्लाई करने में हेल्प करता है। मीडिया क्वेरी आपको यह सुनिश्चित करने में मदद करते हैं, कि आपके द्वारा डिज़ाइन वेबसाइट यूजर इंटरफ़ेस, यूजर एक्सपेरिएंस वर्त्तमान में उपलब्ध सभी डिवाइस पोर्टेबल और नॉन पोर्टेबल डेस्कटॉप, लैपटॉप, नोटबुक, स्मार्टफोन से लेकर सभी डिवाइस पर प्रॉपर्ली प्रीव्यू और प्रॉपर्ली वर्क करे।
What are Media Queries in CSS?
एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी रेस्पॉन्सिव कस्टम वेबसाइट वेब लेआउट डिज़ाइन मेथड या प्रोसेस हैं. जहा आप मीडिया क्वेरी का उपयोग कर एक कम्पलीट रेस्पॉन्सिव वेबसाइट वेबपेज डेवलप कर सकते है. जहा ये आपको उपलब्ध पोर्टेबल और नॉन पोर्टेबल इलेक्ट्रॉनिक डिवाइस के अनुसार कस्टम रेस्पॉन्सिव वेब डेवलपमेंट में हेल्प करते है। जहा ये किसी भी वेब डेवलपर्स को मीडिया क्वेरी से अलग-अलग छोटे से लेकर बड़े इलेक्ट्रॉनिक डिवाइस स्क्रीन साइज़ और स्क्रीन ओरिएंटेशन के कम्पेटिबल रिस्पॉन्सिव वेबसाइट लेआउट बनाने में हेल्प करते हैं।
Basic syntax of media query in CSS.
एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी के फंडामेंटल सिंटैक्स में @मीडिया रूल के बाद मीडिया के टाइप और मीडिया क्वेरी कंडीशन ऐट्रिब्यूट्स को डिस्प्ले किया जाता है.
@media media-type and (condition) {
/* type CSS rules here */
}
Media Query Example.
@media screen and (max-width: 700px) {
body {
background-color: aqua;
}
}
CSS media query types.
एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी सामान्य मीडिया प्रकारों में मुख्य रूप से ये मीडिया क्वेरी ऑप्शन आपको मिलते हैं.
CSS media query attributes types.
- Media query all – यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी के सभी इलेक्ट्रॉनिक डिवाइस गैजेट्स में अप्लाई होता है।
- Media query screen – यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी में स्क्रीन कम्पेटिबल डिवाइस, जैसे, डेस्कटॉप कंप्यूटर, टैबलेट कंप्यूटर, स्मार्टफ़ोन,सेलफोन आदि में अप्लाई होता है।
- Media query print – यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी के डॉक्यूमेंट के प्रिंट होने या डॉक्यूमेंट के प्रिंट प्रीव्यू डिस्प्ले करने में अप्लाई किया जाता है।
- Media query speech – यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी के इलेक्ट्रॉनिक डॉक्यूमेंट को स्क्रीन रीडर से ऑनलाइन रीड करने में होता है।
CSS media query features.
मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी मीडिया फीचर्स में आपको एक पर्टिकुलर रेस्पॉन्सिव इलेक्ट्रॉनिक डिवाइस की स्पेसिफिक नीड को टारगेट करने में हेल्प करते हैं। जहा सामान्य सीएसएस मीडिया क्वेरी मीडिया फीचर्स में ये मुख्य फीचर्स हैं.
CSS media query attributes features.
- Media query width – यह प्रॉपर्टीज मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी व्यूपोर्ट की विड्थ, जैसे, डिवाइस मैक्सिमम-विड्थ, मिनिमम-विड्थ, आदि को कॉन्फ़िगर में हेल्प करते है।
- Media query height – यह प्रॉपर्टीज मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी व्यूपोर्ट की हाइट, जैसे, डिवाइस की मैक्सिमम-हाइट, मिनिमम-हाइट, को कॉन्फ़िगर करने में हेल्प करते है।
- Media query orientation – यह प्रॉपर्टीज मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी डिवाइस का ओरिएंटेशन, जैसे, डिवाइस स्क्रीन पोर्ट्रेट, लैंडस्केप स्क्रीन ओरिएंटेशन, को कॉन्फ़िगर करने में हेल्प करते है।
- Media query resolution – यह प्रॉपर्टीज मौजूदा एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी डिवाइस का रिज़ॉल्यूशन। जैसे, डिवाइस स्क्रीन का मिनिमम-स्क्रीन रिज़ॉल्यूशन, से मैक्सिमम-स्क्रीन रिज़ॉल्यूशन, को कॉन्फ़िगर में हेल्प करते है।
एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी रिस्पॉन्सिव डिज़ाइन बनाने के लिखे एक इम्पोर्टेन्ट एलिमेंट है। बिना इसके रेस्पॉन्सिव वेबसाइट लेआउट और डिज़ाइन बनाना संभव नहीं है.
Here we are given an example, which shows the use of media query to create a responsive webpage layout.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Responsive Web Layout With Media Queries </title>
<style>
body {
font-family: monotype corsiva;
margin: 4;
padding: 30px;
background-color: white;
}
header {
background-color: aqua;
font-size: 1.7em;
color: black;
padding: 20px 0;
text-align: center;
}
/* use default style for large screen */
main {
font-size: 1.9rem;
}
/* use style for smaller screen */
@media screen and (max-width: 700px) {
header {
background-color: blue;
}
main {
font-size: 2rem; /* display font size for small screen */
padding: 20px; /* it add padding between main element */
}
}
</style>
</head>
<body>
<header>
<h1>You can See Responsive Web Layout With Css Media Query</h1>
</header>
<main>
<p><center>A Simple Media Query Paragraph Text</center></p>
</main>
</body>
</html>
Css Media Query Files.
body {
font-family: monotype corsiva;
margin: 4;
padding: 30px;
background-color: white;
}
header {
background-color: aqua;
font-size: 1.7em;
color: black;
padding: 20px 0;
text-align: center;
}
/* use default style for large screen */
main {
font-size: 1.9rem;
}
/* use style for smaller screen */
@media screen and (max-width: 700px) {
header {
background-color: blue;
}
main {
font-size: 2rem; /* display font size for small screen */
padding: 20px; /* it adds padding between main element */
}
}
CSS media query in HTML website webpage conclusion.
एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी मल्टीप्ल पोर्टेबल और नॉन-पोर्टेबल डिवाइस और स्क्रीन साइज़ ओरिएंटेशन के कम्पेटिबल रिस्पॉन्सिव वेबसाइट वेबपेज डिज़ाइन बनाने में एक इम्पोर्टेन्ट फैक्टर हैं। एचटीएमएल वेबसाइट वेबपेज में सीएसएस मीडिया क्वेरी को इफेक्टिव आर्डर में उपयोग करके आप आप एक कम्पलीट यूजर कम्पेटिबल वेबसाइट यूजर इंटरफ़ेस, यूजर एक्सपेरिएंस, रेस्पॉन्सिव वेबसाइट लेआउट डेवलप कर सकते है। आप अपनी वेब डेवलपमेंट जरूरत के अनुसार किसी भी तरह से कस्टम यूजर डिफाइंड मीडिया क्वेरी वेबपेज डेवलप कर सकते है!
