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

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

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 पिक्सल या इससे ज़्यादा चौड़ाई वाली क्वेरी के लिए टेस्ट करती है. नए सिंटैक्स की मदद से, अपने कीवर्ड के बारे में साफ़ तौर पर जानकारी दी जा सकती है. साथ ही, एक जैसे क्वेरी का जवाब देने से बचा जा सकता है.

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