CSS @ media rule क्या हैं पूरी जानकारी हिंदी में?

इस Tutorial में हम आपको CSS @ media Rule in Hindi के बारे में पूरी जानकारी देंगे. Responsive Web Designing के लिए CSS @ media Rule को पढना और समझना बहुत जरूरी हैं. इसलिए हमने @ media Rule पर अलग से यह Tutorial तैयार किया हैं. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.

CSS @media Rule Property का परिचय

किसी भी वेबसाईट को सबसे पहले Desktop के लिए Design किया जाता हैं. ये Design Desktop Screen के लिए तो सही रहता हैं. मगर Mobile या अन्य छोटी स्क्रीन पर सही तरह Display नही होता हैं Websites सभी Sceensize पर पूरी और सही तरह Display हो इस समस्या के समाधान के लिए CSS @media Rule का इस्तेमाल किया जाता हैं. @media Rule अलग-अलग Sceensize के हिसाब से वेबसाईट डिजाईन को Responsive बनाने में सहायता करता हैं Website को Media Type (Sceensize) के अनुसार Responsive बनाने के लिए Desktop, Laptop, Tablet, Mobile सभी Devices के लिए अलग-अलग CSS Style Rules Declare करने पडते हैं फिर @media Rule प्रत्येक Device के बारे में कुछ जानकारी जैसे Width, Height, Orientation, Resolution आदि इकट्ठी करता हैं और Declare Rules को Apply कर देता हैं. इससे एक Website Device और Sceensize के अनुसार अपना Design Change कर लेती हैं.

@media Rule कि सहायता से हम Specific Elements को Media Type के अनुसार Hide और Display भी कर सकते हैं. जैसे हम Social Bar को Mobile पर दिखा सकते हैं और Desktop पर Hide कर सकते हैं.

@media Rule Property General Syntax

@media Rules को खास तरह से Declare किया जाता हैं और इसमें कुछ विशेष Elements को भी लिखना पडता हैं. जिनके बारे में आप @media Rule के General Syntax को पढकर जान जाऐंगे.

@media Rule Syntax देखने पर बडा Complicated लगता हैं. इसलिए इसे सरल बनाने के लिए इसके प्रत्येक भाग को नीचे समझा रहे हैं.

@media Rule Syntax में कुल 5 भाग होते हैं.

1. @media – यह CSS @ Rule की एक Property होती हैं. जिसे सबसे पहले लिखा जाता हैं.
2. operator – @media Rule Syntax में operator दो बार इस्तेमाल किए जाते हैं. Operator एक खास Keyword होता हैं. जिन्हे Media Query और Media Type के बारे में जानकारी देने के लिए इस्तेमाल किया जाता हैं. ये संख्या में 3 होते हैं.<
   • and – इस Operator का काम Media Type के साथ Media Features को जोडना हैं.
   • not – यह Operator संपूर्ण Media Query को उलट देता हैं. मतलब मानता नही हैं.
   • only – यह Operator Browser को सभी Conditions पूरी होने पर ही Media Query को Apply करने के लिए निर्देश देता हैं.
3. media-type – जिस Device या Screen Size के लिए CSS Declare करनी हैं. Media Type के बारे में और ज्यादा नीचे बताया जा रहा हैं.
4. media-features – इस Media Type के लिए CSS लिखनी हैं उसकी विशेषताओं को Media Features कहा जाता हैं. इसके बारे में भी नीचे बताया जा रहा हैंल.
5. CSS Code – यहाँ Style Rules को लिखा जाता हैं. जिस तरह अन्य Elements के लिए Style Rules को Declare किया जाता हैं. ठीक इसी प्रकार यहाँ भी Style Rules कोक Declare किया जाता हैं.

Different Media Types

Media Type वह Device या Viewport (Screen Size) होता हैं जिसके लिए अलग से CSS Declare की जाती हैं. इनकी संख्या लगभग दर्जन भर हैं. लेकिन हम यहाँ कुछ प्रचलित और उपयोगी Media Types के बारे में ही बता रहे हैं.

• all – इसे सभी प्रकार के Devices के लिए इस्तेमाल किया जाता हैं. By Default यही Media Type Set रहता हैं.
• screen – इस Media Type में Computer Screen, Laptop, Tablets, Mobile Screen आदि को सम्मिलित किया जाता हैं.
• print – इस Media Type से Printers के लिए CSS Rule Declare किया जाता हैं.
• speech – इस Media Type से Screen Readers के लिए CSS Rule Declare किया जाता हैं.

Different Media Features

प्रत्येक Media Type को कुछ विशेषताओं के साथ भी बांध सकते हैं. ताकि Declare Media Query Conditions पूरी होने पर ही Apply हो. इन विशेषताओं को ही Media Features कहा जाता हैं. जिनके बारे में नीचे बताया जा रहा हैं.

• height – इस Feature द्वारा Viewport यानि उपलब्ध Screen Size की ऊँचाई को मापा जाता हैं.
• max-height – Display Area की Maximum Height को देखा जाता हैं.
• min-height – Display Area की Minimum Height को देखा जाता हैं.
• width – Viewport की चौडाई यानि Width को मापा जाता हैं.
• max-width – Display Area की Maximum Width को मापा जाता हैं.
• min-width – Display Area की Minimum Width को मापा जाता हैं.
• color – Output Device की Color क्षमता को देखा जाता हैं.
• max-color – इससे Device की अधिकतम यानि Maximum Color क्षमता को देखा जाता हैं.
• min-color – इस Feature से Device की Minimum Color क्षमता को देखा जाता हैं.
• color-gamut – Browser और Device की color-range को देखा जाता हैं.
• color-index – Output Device की Color Display क्षमता को देखा जाता हैं.
• max-color-index – Device अधिकतम कितने Color दिखा सकता हैं? यह मापा जाता हैं.
• min-color-index – Device Minimum कितने Color दिखा सकता हैं? यह मापा जाता हैं.
• inverted-colors – क्या ब्राउजर और Operating System द्वारा Color को Invert किया जाता हैं.
• monochrome – किसी Monochrome Device की bits per “color” क्षमता को मापा जाता हैं.
• max-monochrome – किसी Monochrome Device की अधिकतम bits per “color” क्षमता को मापा जाता हैं.
• min-monochrome – किसी Monochrome Device की Minimum bits per “color” क्षमता को मापा जाता हैं.
• resolution – Output Device का Resolution मापा जाता हैं.
• max-resolution – Device का Maximum Resolution मापा जाता हैं.
• min-resolution – Device का Minimum Resolution मापा जाता हैं.
• aspect-ratio – Viewport या Screen की Width और Height का Ratio देखा जाता हैं.
• max-aspect-ratio – Display Area की Width और Height के बीच Maximum aspect-ratio को देखा जाता हैं.
• min-aspect-ratio – Display Area की Width और Height के बीच Minimum aspect-ratio को देखा जाता हैं.
• orientation – Viewport का Orientation (Landscape एवं Portrait) देखा जाता हैं.
• overflow-block – Device की overflow-block क्षमता देखी जाती हैं.
• overflow-inline – Device की overflow-inline क्षमता देखी जाती हैं.
• hover – क्या Input Device से Elements पर Hover किया जा सकता हैं?
• any-hover – इस Feature से भी उपलब्ध Input Device से Elements पर Hover को Test किया जाता हैं.
• pointer – क्या Input Device कोई Pointing Device हैं?
• any-pointer – इससे भी Input Device के Pointing Feature को देखा जाता हैं.
• grid – इससे Device में grid और bitmap Feature को देखा जाता हैं.
• scan – Output Device की Scanning Process को देखा जाता हैं.
• update – Output Device कितनी जल्दी Content की Appearance को Modify करता हैं.
• scripting – क्या Script उपलब्ध हैं?

@media Rule Example in Hindi

इसे Try कीजिए

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS @ media Rule Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की @ media Rule Properties, Media Types और Media Features के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital