कैसे बनाएं: तीक्ष्ण उपकरण के ब्रेकपाइंट

सीमांत उपकरण ब्रेकपाइंट के लिए मीडिया क्वेरी का इस्तेमाल सीखें。

तीक्ष्ण उपकरण ब्रेकपाइंट

विभिन्न ऊंचाई और चौड़ाई वाले स्क्रीन और उपकरणों की बहुतायत है, इसलिए प्रत्येक उपकरण के लिए सटीक ब्रेकपाइंट बनाना मुश्किल है。

ऑपरेशन को सरल बनाने के लिए, आप पांच सामान्य समूहों को स्थापित कर सकते हैं:

उदाहरण

/* अति छोटे उपकरण (मोबाइल, 600px और नीचे) */
@media only screen and (max-width: 600px) {...}
/* छोटे उपकरण (आड़ा प्लेटफॉर्म और बड़े मोबाइल, 600px और अधिक) */
@media only screen and (min-width: 600px) {...}
/* मध्यम उपकरण (आड़ा प्लेटफॉर्म, 768px और अधिक) */
@media only screen and (min-width: 768px) {...}
/* मध्यम उपकरण (लैपटॉप/डेस्कटॉप, 992px और अधिक) */
@media only screen and (min-width: 992px) {...}
/* बड़े उपकरण (बड़े लैपटॉप और डेस्कटॉप, 1200px और अधिक) */
@media only screen and (min-width: 1200px) {...}

अपने आप साफल्य प्रयोग करें

संबंधित पृष्ठ

तत्वज्ञानःCSS मीडिया क्वेरी

तत्वज्ञानःCSS मीडिया क्वेरी उदाहरण

संदर्भ मानचित्रःCSS @media नियम

तत्वज्ञानःमीडिया क्वेरी के द्वारा रिस्पोंसिव वेब डिजाइन को प्रयोग करके

संदर्भ मानचित्रःJavaScript window.matchMedia() विधि