Breakpoints viewport की वे चौड़ाइयाँ हैं जिन पर रिस्पॉन्सिव लेआउट की बनावट बदलती है। एक आम और सुरक्षित सेट है: बड़े फ़ोन के लिए लगभग 640 px, टैबलेट के लिए 768 px, छोटे लैपटॉप के लिए 1024 px और डेस्कटॉप के लिए 1280 px, rem में min-width queries के रूप में लिखे हुए। बेहतर तरीका यह है कि इस सेट को शुरुआत मानें और breakpoints को वहाँ ले जाएँ जहाँ आपका अपना कंटेंट ग़लत दिखने लगे, डिवाइस साइज़ के पीछे भागने के बजाय।
एक नज़र में आम breakpoints
| रेंज | आम breakpoint | यहाँ क्या आता है |
|---|---|---|
| छोटे फ़ोन | बुनियादी स्टाइल (कोई query नहीं) | 320–375 px चौड़े फ़ोन |
| बड़े फ़ोन | 480–640 px | portrait में 390–440 px के फ़ोन, landscape में फ़ोन |
| टैबलेट | 768 px | iPad mini और portrait में टैबलेट |
| छोटे लैपटॉप, landscape में टैबलेट | 1024 px | landscape में iPad, ज़ूम के साथ 13” लैपटॉप |
| डेस्कटॉप | 1280 px | ज़्यादातर लैपटॉप और डेस्कटॉप स्क्रीन |
| चौड़ा डेस्कटॉप | 1440–1536 px | बड़े मॉनिटर |
इन्हें rem में लिखें (40rem, 48rem, 64rem, 80rem), ताकि जब यूज़र अपना डिफ़ॉल्ट फ़ॉन्ट साइज़ बढ़ाएँ तो ये भी खिसकें।
लोकप्रिय फ़्रेमवर्क breakpoints कैसे तय करते हैं
| फ़्रेमवर्क | Breakpoints (min-width) |
|---|---|
| Tailwind CSS v4 | 640, 768, 1024, 1280, 1536 px |
| Bootstrap 5 | 576, 768, 992, 1200, 1400 px |
| Material Design 3 window size classes | compact < 600, medium 600–839, expanded 840–1199, large 1200–1599, extra-large ≥ 1600 (dp) |
ढाँचे पर ये मोटे तौर पर सहमत हैं: टैबलेट पर बदलाव लगभग 600–768 पर, डेस्कटॉप पर बदलाव लगभग 1000–1200 पर, और एक या दो चौड़े साइज़। विस्तार से: Tailwind breakpoints और Bootstrap breakpoints।
डिवाइस पर आधारित breakpoints जल्दी पुराने क्यों हो जाते हैं
breakpoints को ठीक डिवाइस की चौड़ाई पर रखने का मन करता है: iPhone के लिए 375, नए iPhone के लिए 390, Plus मॉडल के लिए 414। समस्या यह है कि डिवाइस हर साल बदलते हैं। सिर्फ़ मौजूदा iPhone ही 375 से 440 CSS पिक्सेल चौड़े हैं (iPhone viewport चार्ट देखें), Android फ़ोन और भी कई चौड़ाइयाँ जोड़ते हैं, और फ़ोल्ड होने वाले फ़ोन व स्प्लिट-स्क्रीन विंडो कहीं भी आ सकते हैं।
जो लेआउट सिर्फ़ ख़ास डिवाइस चौड़ाइयों पर चलता है, वह उनके बीच वाली चौड़ाइयों पर टूट जाएगा। breakpoints को वह जगह दिखानी चाहिए जहाँ लेआउट को बदलना है, और बीच में लेआउट फ़्लूइड रहना चाहिए।
अपने कंटेंट से breakpoints कैसे चुनें
- सबसे पतला लेआउट पहले बनाएँ, लगभग 320 px पर।
- Chrome DevTools के Responsive मोड में viewport को धीरे-धीरे चौड़ा करें।
- जहाँ डिज़ाइन ग़लत दिखने लगे, वहाँ रुकें: लाइनें बहुत लंबी हो जाएँ, कार्ड खिंच जाएँ, दूसरे कॉलम की जगह बन जाए, या नेविगेशन एक लाइन में आ सके।
- उसी चौड़ाई पर breakpoint जोड़ें, किसी समझदार rem वैल्यू तक गोल करके।
- दोहराएँ, जब तक आप अपने सबसे चौड़े सपोर्ट वाले लेआउट तक न पहुँच जाएँ।
आम तौर पर तीन से पाँच breakpoints बनते हैं। अगर छह से ज़्यादा हैं, तो शायद उनमें से कुछ कंपोनेंट लेवल की समस्याएँ ठीक कर रहे हैं, जिन्हें container query या कोई फ़्लूइड तकनीक बेहतर संभालती।
फ़्लूइड तकनीकों से कम breakpoints
आधुनिक CSS कई breakpoints की ज़रूरत ख़त्म कर देती है:
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))कॉलम अपने-आप जोड़ता और हटाता है।flex-basisके साथflex-wrap: wrapआइटम को जगह ख़त्म होने पर अगली लाइन में जाने देता है।clamp()फ़ॉन्ट साइज़ और spacing को धीरे-धीरे बदलता है:font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem)।width: min(100% - 2rem, 70rem)एक ही लाइन में साइड padding और अधिकतम चौड़ाई वाला container बना देता है।
breakpoints को बनावट वाले बदलावों के लिए रखें: नेविगेशन का स्टाइल, पेज के कॉलम की संख्या, साइडबार की जगह।
Breakpoints और टैबलेट
breakpoints के फ़ैसले सबसे ज़्यादा टैबलेट पर दिखते हैं। portrait में iPad मॉडल के हिसाब से 744–1032 px चौड़ा होता है, इसलिए वह 768 या 1024 के किसी भी तरफ़ पड़ सकता है। फिर घुमाने पर वह एक और breakpoint पार कर जाता है। टैबलेट को दोनों ओरिएंटेशन में टेस्ट करें, और याद रखें कि iPad Safari आम तौर पर डेस्कटॉप साइट माँगता है। ज़्यादा जानकारी Chrome में वेबसाइट को iPad की तरह कैसे देखें में।
अपने breakpoints टेस्ट करना
- DevTools के device toolbar में Show media queries चालू करें, ताकि हर breakpoint एक पट्टी के रूप में दिखे; पट्टी पर क्लिक करके उस चौड़ाई पर पहुँचें।
- हर breakpoint को उसकी ठीक चौड़ाई पर और 1 px कम पर टेस्ट करें।
- सिर्फ़ चौड़ाइयाँ नहीं, नाम वाले फ़ोन और टैबलेट भी जाँचें। डिवाइस प्रीसेट वाला मोबाइल व्यू एक्सटेंशन कई डिवाइस साइज़ पर पेजों में क्लिक करते जाने का सबसे तेज़ तरीका है।
पूरा तरीका रिस्पॉन्सिव डिज़ाइन कैसे टेस्ट करें में है।
अक्सर पूछे जाने वाले सवाल
रिस्पॉन्सिव डिज़ाइन के लिए स्टैंडर्ड breakpoints कौन-से हैं?
कोई आधिकारिक स्टैंडर्ड नहीं है। आम वैल्यू हैं 640, 768, 1024 और 1280 px (Tailwind) या 576, 768, 992, 1200 और 1400 px (Bootstrap)। एक सेट चुनें और हर जगह वही इस्तेमाल करें।
मोबाइल के लिए कौन-सा breakpoint इस्तेमाल करें?
mobile first CSS में फ़ोन के लिए कोई breakpoint नहीं चाहिए: उन्हें बुनियादी स्टाइल मिलती हैं। पहला breakpoint, आम तौर पर 480 और 640 px के बीच, वह जगह बताता है जहाँ से लेआउट ज़्यादा जगह इस्तेमाल करना शुरू कर सकता है।
किसी वेबसाइट में कितने breakpoints होने चाहिए?
आम तौर पर तीन से पाँच। उनके बीच फ़्लूइड लेआउट रखें, और breakpoint सिर्फ़ वहीं जोड़ें जहाँ कंटेंट को बनावट में बदलाव चाहिए।