श्रेणी: डेवलपर टूल
रिस्पॉन्सिव ब्रेकपॉइंट चीटशीट
फ्रेमवर्क के बीच ब्रेकपॉइंट तुलना करें, या अपना बनाएँ
Tailwind, Bootstrap, Bulma और Material Design द्वारा इस्तेमाल किए जाने वाले डिफ़ॉल्ट min-width ब्रेकपॉइंट की तुलना करें, इनमें से किसी के लिए भी तैयार मीडिया क्वेरी कॉपी करें, या कस्टम मीडिया क्वेरी बनाने के लिए अपने ब्रेकपॉइंट नाम और चौड़ाई डालें।
| नाम | मिन-विड्थ |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}हर लाइन में एक नाम और पिक्सेल चौड़ाई डालें, जैसे "md, 768"।
| नाम | मिन-विड्थ |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
हर CSS फ्रेमवर्क अपने ख़ुद के ब्रेकपॉइंट नाम और पिक्सेल चौड़ाई चुनता है, जिससे प्रोजेक्ट बदलते समय यह भूलना आसान हो जाता है कि कहाँ कौन सा लागू होता है। यह टूल चार आम फ्रेमवर्क के डिफ़ॉल्ट को साथ-साथ सूचीबद्ध करता है और इनमें से किसी को भी — या आपकी टाइप की हुई कस्टम सूची को — पेस्ट करने लायक @media (min-width: …) ब्लॉक में बदल देता है।
इस्तेमाल कैसे करें
- कोई फ्रेमवर्क चुनें ताकि उसके डिफ़ॉल्ट ब्रेकपॉइंट और मीडिया क्वेरी दिखें।
- अपनी ज़रूरत के ब्रेकपॉइंट के लिए जनरेट हुआ CSS कॉपी करें।
- या कस्टम क्वेरी बनाने के लिए अपने ब्रेकपॉइंट नाम और चौड़ाई सूचीबद्ध करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- min-width ही क्यों, max-width क्यों नहीं?
- min-width, मोबाइल-फ़र्स्ट तरीक़े में बेस स्टाइल सबसे छोटी स्क्रीन को टारगेट करती हैं और हर ब्रेकपॉइंट बड़ी स्क्रीन के लिए स्टाइल जोड़ता है, जिससे फ्रेमवर्क के अपने ब्रेकपॉइंट की तरह नियमों को बार-बार ओवरराइड करने से बचा जाता है।
- क्या ये ठीक फ्रेमवर्क के डिफ़ॉल्ट से मेल खाते हैं?
- हाँ, ये हर फ्रेमवर्क के दस्तावेज़ीकृत डिफ़ॉल्ट ब्रेकपॉइंट हैं। अगर आपके प्रोजेक्ट में कस्टम Tailwind या Bootstrap कॉन्फ़िग है, तो इसकी बजाय अपने प्रोजेक्ट की ख़ुद की वैल्यू के साथ कस्टम ब्रेकपॉइंट बिल्डर इस्तेमाल करें।
- कस्टम ब्रेकपॉइंट सूची को कैसे फ़ॉर्मैट करूँ?
- हर लाइन में एक ब्रेकपॉइंट, कॉमा या स्पेस से अलग किया गया नाम और पिक्सेल चौड़ाई, उदाहरण के लिए "md, 768"।