रेंज मीडिया क्वेरी के लिए नया सिंटैक्स

जानें कि इस नए सिंटैक्स से मीडिया क्वेरी को कैसे बेहतर बनाया जा सकता है.

Rachel Andrew

मीडिया क्वेरी में रिस्पॉन्सिव डिज़ाइन चालू होता है. साथ ही, व्यूपोर्ट के सबसे कम और सबसे बड़े साइज़ की जांच करने वाली रेंज की सुविधाओं का इस्तेमाल, मीडिया क्वेरी का इस्तेमाल करने वाली करीब 80% साइटों के लिए किया जाता है. मीडिया क्वेरी लेवल 4 की खास जानकारी में, इन रेंज क्वेरी के लिए बेहतर सिंटैक्स शामिल है.

यहां दिए गए उदाहरणों से पता चलता है कि यह आपकी क्वेरी को कैसे बेहतर बना सकता है.

व्यूपोर्ट की कम से कम चौड़ाई के लिए सामान्य मीडिया क्वेरी टेस्टिंग को इस तरह लिखा जाएगा:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

नए सिंटैक्स में, तुलना करने वाले ऑपरेटर का इस्तेमाल करने की अनुमति होती है:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

ज़्यादा से ज़्यादा चौड़ाई की जांच करना:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

साथ ही, लेवल 4 सिंटैक्स का इस्तेमाल करने वाला वर्शन:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

इस सिंटैक्स की मदद से, क्वेरी को आसानी से मैनेज किया जा सकता है. खास तौर पर, दो चौड़ाई के बीच की जांच करते समय. नीचे दिए गए उदाहरण में, मीडिया क्वेरी, कम से कम 400 पिक्सल और ज़्यादा से ज़्यादा 600 पिक्सल की चौड़ाई वाले व्यूपोर्ट के लिए जांच करती है.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

इसे नए सिंटैक्स में इस तरह से लिखा जा सकता है:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

इस मामले में, width वह सुविधा है जिसकी जांच की जा रही है. यह दो वैल्यू के बीच में होती है.

मीडिया क्वेरी को कम शब्दों में बनाने के अलावा, नए सिंटैक्स का फ़ायदा यह है कि इससे क्वेरी ज़्यादा सटीक होती है. min- और max- क्वेरी में तय की गई वैल्यू शामिल होती हैं. उदाहरण के लिए, min-width: 400px 400 पिक्सल या उससे ज़्यादा चौड़ाई के लिए टेस्ट करता है. नए सिंटैक्स की मदद से, अपनी क्वेरी के बारे में साफ़ तौर पर बताया जा सकता है. साथ ही, एक जैसी क्वेरी से होने वाली गड़बड़ियों से बचा जा सकता है.

जिन ब्राउज़र में रेंज सिंटैक्स का इस्तेमाल नहीं किया गया है उनके लिए, नए सिंटैक्स का इस्तेमाल किया जा सकता है. इसके लिए, PostCSS प्लग इन का इस्तेमाल करें. यह आपकी स्टाइलशीट में नए सिंटैक्स को पुराने सिंटैक्स में बदल देगा.