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

bookmark_border संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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 प्लग इन का इस्तेमाल करें. यह आपकी स्टाइलशीट में नए सिंटैक्स को पुराने सिंटैक्स में बदल देगा.