CSS @media Rule

Introduction to CSS @media Rule

CSS @media rule अलग अलग media devices (Mobile, Desktop, Tablet आदि) के लिए अलग अलग CSS styles define करने के लिए use किया जाता है।

अक्सर ऐसा होता है की सभी तरह के media devices के लिए एक ही style define की जाती है। लेकिन ऐसा करने से आपका webpage अलग अलग media devices पर ठीक तरह से display नहीं होता है।

उदाहरण के लिए यदि आप किसी normal webpage को mobile पर देखेंगे तो वह ठीक तरह से display नहीं होता है। वह page mobile device पर fit नहीं होता है। क्योंकि mobile के लिए उसकी width बहुत अधिक होती है।

ऐसे में आपको उस webpage को mobile devices के लिए optimize करने की आवश्यकता होती है। इसके लिए आप उस page में @media rule द्वारा mobile devices पर use करने के लिए CSS styles define कर सकते है। ये styles केवल तब ही काम करती है जब webpage को किसी mobile device पर देखा जाएगा।

इसी प्रकार आप अलग अलग तरह के media devices (desktop, laptop, tablets आदि) के लिए @media rule द्वारा अलग अलग CSS styles define कर सकते है। इस rule को CSS media queries के नाम से भी जाना जाता है।

जब भी आप इस rule को अपने webpage में define करते है और webpage को किसी device के through देखते है तो उस समय यह rule उस device के viewport (device का actual screen area) की width, height, orientation और resolution आदि जैसी जानकारी collect करता है। बाद में इसी जानकारी के आधार पर अलग अलग devices पर अलग अलग styles apply की जाती है।

इस जानकारी को collect करने के लिए अलग अलग media feature expressions use किये जाते है। जिनके बारे में आप आगे जानेंगे। लेकिन आइये उससे पहले @media rule का syntax समझने का प्रयास करते है।

Syntax of CSS @media Rule

CSS @media rule का general syntax निचे दिया जा रहा है।

@media operator media-type operator (media-features-expression)
{
    CSS Code here;
}

जैसा की आप ऊपर दिए गए syntax में देख सकते है @media rule को media type, and keyword और media-features के block के रूप में define किया जाता है। इस rule को define करने के लिए आप @media keyword use करते है।

इस syntax को समझने के लिए आपको इन सभी terms को समझना आवश्यक है। इनके बारे में निचे detail से बताया जा रहा है।

Operator

Operators media query create करने के लिए use किये जाते है। आप निचे दिए जा रहे operators को use कर सकते है।

• and - यह operator media features को combine करने के लिए use किया जाता है।
• not - यह operator media query को negate करने के लिए use किया जाता है।
• only - यह operator use करने से only जब complete query true होती है तो ही CSS style apply होती है।

media-type

Media type वह device type होता है जिस पर आप CSS style define करना चाहते है। Media type के रूप में आप निचे दी गयी values define कर सकते है।

• all - सभी media devices के लिए इस value को प्रयोग किया जाता है।
• print - यह value printers के लिए use की जाती है।
• screen - यह value desktop computers, tablets और mobile आदि media device के लिए प्रयोग की जाती है। Web designing करते समय मुख्यतः आप इसी value को use करेंगे।
• speech - यह value screen readers के लिए use की जाती है। Screen readers screen के text को loudly read करते है।

media-feature-expression

Media feature expressions media device की special characteristics को test करने के लिए प्रयोग किया जाते है। उदाहरण के लिए आप CSS style को उन्हीं devices पर apply करना चाहते है जिनके viewport की width 400 pixels से कम है तो इसके लिए max-width media feature expression use करेंगे।

आप निचे दिए गए media feature expressions value के रूप में use कर सकते है।

• width - viewport की width test करने के लिए।
• min-width - viewport की minimum width test करने के लिए।
• max-width - viewport की maximum width test करने के लिए।
• height - viewport की height test करने के लिए।
• min-height - viewport की minimum height test करने के लिए।
• max-height - viewport की maximum height test करने के लिए।
• aspect-ratio - viewport की width और height का aspect ratio test करने के लिए।
• orientation - viewport के orientation को test करने के लिए।
• resolution - media device का resolution test करने के लिए।
• scan - Media device की scanning process test करने के लिए।
• grid - Device में grid या bitmap screen है test करने के लिए।
• update - कितनी जल्दी device appearance को update करता है यह test करने के लिए।
• overflow-block - Media device की overflow-block condition handling को test करने के लिए।
• overflow-inline - Media device की overflow-inline condition handling test करने के लिए।
• color - Media device में हर bit में कितने color component है यह test करने के लिए।
• color-gamut - Media device के द्वारा कितने color support किये जाते है यह test करने के लिए।
• color-index - Media device की color lookup table में कितनी entries है यह test करने के लिए।
• display-mode - Web application का display mode test करने के लिए।
• monochrome - एक monochrome device में per bit पर कितने colors है यह test करने के लिए।
• inverted-colors - क्या browser या operating system colors को invert करते है यह test करने के लिए।
• pointer - क्या primary input mechanism एक input device है यह test करने के लिए।
• hover - क्या primary mechanism से user elements पर hover कर सकता है यह test करने के लिए।
• any-pointer - क्या कोई भी available input device एक pointing device है यह test करने के लिए।
• any-hover - क्या किसी भी available input device से user elements पर hover कर सकता है।
• light-level - Environment का light level test करने के लिए।
• scripting - क्या scripting available है यह test करने के लिए।

Example of CSS @media Rule

निचे CSS @media rule को एक simple उदाहरण द्वारा समझाया जा रहा है। उदाहरण में @media rule द्वारा ऐसी style define की गयी है जो सिर्फ उन devices पर apply होगी जिनकी width 300 pixels है।

<html>

<head>
<title>CSS @media Rule Demo</title>
<style>
@media only screen and (width:300px)
{
    body
       {
             width:300px  !important
        }
}
</style>
</head>

<body>
<p>I like Best Hindi Tutorials.</p>
</body>

</html>

ऊपर दिया गया उदाहरण ऐसा webpage generate करता है जो 300 pixel device पर देखे जाने पर भी सही तरह से display होता है।