CSS में मीडिया क्वेरी क्या है? CSS Media Queries

CSS Media Queries क्या है और Media Rule का इस्तेमाल CSS लिखते समय कैसे करते है और साथ ही यहाँ पर में आपको CSS Media Queries को उपयोग करने का तरीका और कुछ उदाहरण भी दुगा जिससे आपको सिखने में काफी आसानी होगी।

CSS में हम Media Quaries की मदद से अपने साधारण Web Page को अलग-अलग Screen Size, Device-Orientation और Display-Density में Mobile Phones, Tablets, Desktops, Printers के हिसाब से डिजाईन कर सकते है जिससे जब भी आपका वेब पेज उस साइज़ में खोला जायेगा तो वो उस Media Quaries के डिजाईन को दिखायेगा।

कभी-कभी आपने कुक ऐसे वेबसाइट भी देखे होगे जो की मोबाइल में अलग तरह के दिखाई देते है और कंप्यूटर में उनका डिजाईन बदल जाता है और हर एक डिवाइस के हिसाब से उसका Look बदलता है ऐसे वेबसाइट्स को हम Responsive Design कहते हैं जिनको Media Quaries मदद से डिजाईन किया जाता है और Web Page को Devices और Screen Sizes के अनुसार अलग-अलग तरीके से Present किया जा सकता है।

• खराब Memory Card और Pendrive को ठीक कैसे करें
• डाटाबेस क्या है? What is Database in Hindi

CSS Media Queries क्या है?

Media Queries को मुख्यत CSS2 में Introduce जिसके बाद Responsive Web Design में बढ़ोतरी देखने को मिली, मीडिया रूल को इस्तेमाल करके हम वेबसाइट को अलग-अलग Screen Size, Device-Orientation और Display-Density में Mobile Phones, Tablets, Desktops, Printers के लिए अपनी CSS में अलग मीडिया रूल देखर उससे डिजाईन कर सकते है, एक वेबसाइट में आप कितने भी Media Queries उपयोग करके उस वेबसाइट के विभिन-विभिन रूप को डिजाईन कर पायेगे।

मान लीजिये आपकी वेबसाइट साधारण वेबसाइट है जिसको आपको मोबाइल और कंप्यूटर दोनों में अलग रूप देना है तो आपको मोबाइल के डिजाईन में कोई बदलाव करना होगा तो आपको उस मोबाइल साइज़ मीडिया रूल में CSS रूल्स जोड़ने होगे और अगर आपको कंप्यूटर साइज़ को डिजाईन करना है तो कंप्यूटर साइज़ मीडिया रूल में CSS रूल्स जोड़ने होगे, इससे आप एक ही Css फाइल में ढेर सारे रूल्स बना सकते है जो Responsive Web Design में मदद करती है।

Media Types के अंदर हम बहुत प्रकार के User-Agent Devices के List होते हैं जिसको हम Media Queries की मदद से HTML Documents को Display कर पाते हैं, सबसे पहले HTML4 में W3C ने Media Queries Level 4 में Introduce किया, जो निम्न प्रकार है।

Media Queries जो की ब्राउज़र के आधार पर कार्य करता है जिसमे से बहुत सारे वेब ब्राउज़र Media Queries के Rule को सुप्प्पोर्ट नहीं करते पर खुशखबरी की बात यह है की हम जिन ब्राउज़र का उपयोग करते है उन सभी को इनके लायक बनाया गया है, यह कुछ ब्राउज़र है जो @Media Rule को पूरी तरह सपोर्ट करते है।

CSS Media Queries का इस्तेमाल कैसे करें?

1. @Media Rule Method का Use करके।

CSS के अंदर @media Rule Use करके Media Conditions Apply कर सकते हैं जिसके लिएकुछ इस तरह से Css के अन्दर @Media Rule Method का Use करें।

@media only screen and (max-width: 750px) {styles}

2. @Import Rule Method का Use करके।

आप किसी अन्य CSS file को Import कर सकते है और उसमे Conditions डाल सकते हैं।

@import url(cssfile.css) not screen and (min-width: 480px)

3. Link Tag Method का Use करके।

आप Directl HTML File में CSS Import करके उसमे Media Attribute Use कर सकते हैं जिसके कुछ इस तरह से दूसरी Css को को लिंक करें।

<link rel="stylesheet" media="screen and (max-width: 750px)" href="example.css">

CSS Media Types का इस्तेमाल कैसे करें?

Css Media Types को हम तीन तरीके से अपने Documents पर Apply कर सकते हैं जिसमे जो भी आपको आसान लगता है आपको वो इस्तेमाल करना है, तीनो ही तरीके काफी आसान है है बस आपको सही तरह से इनको समझना होगा।

1. CSS में @Media Rule का Use करके

हम CSS File के कोड के अन्दर इस तरह से Media Types को उपयोग कर सकते है जिसमे हमने Media Types में Screen, Print दिया है।

@media screen{
body{font-size:16px;}
}
@media print{
body{font-size:10px;}
}
@media screen,print{
body{color:#fff;}
}

2. CSS में @Import Rule से

जब हम कोई भी Font File से Fonts और Fcons को Front-nd में दिखाने के लिए उन्हें इसी तरीके से इम्पोर्ट करते है, हम अलग-अलग CSS File बना कर उसे एक File के अंदर Import कर सकते हैं इसके लिए हमे @Import Rule Use करना होगा जिसमे हमे उस file की Path और वह किस media के लिए उपयोग होगी यह बताना होगा, इसे समझने के लिए आप नीचे उदाहरण देखे।

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body{background-color:#ccc;}

3. HTML में लिंक Media Attribute Use करके

हम इस तरीके में Website के Header में इस तरह से किसी भी Css File को Target कर सकते है और बता सकते है की उससे किस Media Types में Define करना है, तो हम कुछ इस तरह से इससे इस्तेमाल करेंगे।

<head>
<link rel="stylesheet" type="text/css" media="all" href="css/all.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
</head>

Website Responsive Design कैसे Check करें?

दोस्तों अब आप एक वेबसाइट को डिजाईन कर रहे है तो आपको ध्यान में यह रखना है की इससे किस-किस साइज़ में डिजाईन करना ही, जाहिर सी बात है आपके डिजाईन की गयी वेबसाइट को फ़ोन, कंप्यूटर और अन्य डिवाइस में भी एक्सेस किया जा सकता है, ऐसे में सबसे पहले CSS Media Queries लिस्ट बनाये जिसमे वो सभी Screen-Size जोड़े जिसमे आपकी वेबसाइट डिजाईन होगी।

• CSS Selectors क्या है? CSS Selectors in Hindi
• CSS Full Form in Hindi
• CSS क्या है CSS कैसे सीखे? CSS in Hindi

जब हम Different Devices के लिए Stylesheets Use करते है तो आप वो सभी डिवाइस लेकर तो बेठ नहीं सकते तो इसके लिए आप Browser के Developer Tools से कर सकते हैं Firefox या Chrome browser के Responsive View में जा कर आप अलग-अलग size की screen के लिए अपने Design को Check कर सकते हैं।

अगर आपको CSS Media Queries की जानकारी होती है तो आप आसानी से वेबसाइट को डिजाईन कर सकते है अलग-अलग डिवाइस के लिए और एक Responsive डिजाईन कर सकते है, मुझे उम्मीद है आपको CSS Media Queries क्या है और कैसे काम करता है इसके बारे में यह जानकारी पसंद आई होगी अगर आप चाहते है की CSS in Hindi के बारे में और भी लिखू तो आप मुझे कमेंट में अवस्य बताये।