CSS @media Rule Property
किसी भी वेबसाईट को सबसे पहले Desktop के लिए Design किया जाता हैं। ये Design Desktop Screen के लिए तो सही रहता हैं। मगर Mobile या अन्य छोटी स्क्रीन पर सही तरह Display नही होता हैं। Websites सभी Screen Size पर पूरी और सही तरह Display हो इस समस्या के समाधान के लिए CSS @media Rule का प्रयोग किया जाता हैं। @media Rule अलग-अलग Screen Size के हिसाब से वेबसाईट डिजाईन को Responsive बनाने में सहायता करता हैं। Website को Media Type (Screen Size) के अनुसार Responsive बनाने के लिए Desktop, Laptop, Tablet, Mobile सभी Devices के लिए अलग-अलग CSS Style Rules Declare करने पडते हैं।
फिर @media Rule प्रत्येक Device के बारे में कुछ जानकारी जैसे Width, Height, Orientation, Resolution आदि इकट्ठी करता हैं और Declare Rules को Apply कर देता हैं। इससे एक Website Device और Screen Size के अनुसार अपना 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 operator media-type operator (media-features) {CSS Code;}
@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 करने के लिए निर्देश देता हैं।
4. Media Features – इस Media Type के लिए CSS लिखनी हैं उसकी विशेषताओं को Media Features कहा जाता हैं।
5. CSS Code – यहाँ Style Rules को लिखा जाता हैं। जिस तरह अन्य Elements के लिए Style Rules को Declare किया जाता हैं। ठीक इसी प्रकार यहाँ भी Style Rules को Declare किया जाता हैं।
@media Rule Example in Hindi
@media screen {
body {color:white;font-size: 16px; background:black;}
@media print {
body {color:black;font-size: 12px; background:white;}
h1 {color:green;font-size: 22px;}
}
}
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment