रिस्पॉन्सिव पैक - GrapesJS के लिए एडवांस्ड डिवाइस और ब्रेकपॉइंट मैनेजर

डिफ़ॉल्ट GrapesJS डिवाइस स्विचर आपको बताता है कि आप किस चौड़ाई में बदलाव कर रहे हैं। यह आपको यह नहीं बताता कि उस ब्रेकपॉइंट पर क्या टूट रहा है।

मोबाइल पर फ़ॉन्ट आकार सेट करें. टैबलेट पर कोई मार्जिन जोड़ें. दो घंटे बाद, आप डेस्कटॉप पर वापस आ गए हैं और सोच रहे हैं कि शीर्षक गलत क्यों दिखता है — यह देखने का कोई आसान तरीका नहीं है कि कौन सा रिस्पॉन्सिव ओवरराइड इसका कारण बना.

उत्तरदायी पैक स्टॉक GrapesJS डिवाइस प्रबंधक को वास्तविक दुनिया के संपादन के लिए निर्मित एक पूर्ण उत्तरदायी वर्कफ़्लो के साथ बदल देता है।

आपको क्या मिलता है

🔴 उत्तरदायी ओवरराइड संकेतक

देखें कि चयनित घटक में ब्रेकपॉइंट-विशिष्ट शैलियाँ कहाँ हैं।

प्रत्येक डिवाइस के बगल में छोटे संकेतक दिखाते हैं कि जब किसी घटक में प्रतिक्रियाशील ओवरराइड होते हैं - ताकि आप सीएसएस के माध्यम से खुदाई किए बिना मोबाइल, टैबलेट या डेस्कटॉप-विशिष्ट परिवर्तनों को तुरंत देख सकें।

📱 साइड-बाय-साइड रिस्पॉन्सिव पूर्वावलोकन

एक साथ कई उपकरणों का पूर्वावलोकन करें।

सिंक्रनाइज़ स्क्रॉलिंग के साथ मोबाइल, टैबलेट और डेस्कटॉप को साथ-साथ देखें. जल्दी से पकड़ें:

• टूटे हुए लेआउट

• अप्रत्याशित रिक्ति

• टाइपोग्राफी में परिवर्तन

• अतिप्रवाह संबंधी समस्याएं

• गलत ब्रेकपॉइंट पर दिखाई देने या गायब होने वाले तत्व

अब एक-एक करके उपकरणों के बीच स्विच करने की जरूरत नहीं है।

⚙️ पूर्ण ब्रेकपॉइंट संपादक

अपने उत्तरदायी उपकरणों पर पूर्ण नियंत्रण रखें।

डिवाइस जोड़ें, नाम बदलें, पुन: व्यवस्थित करें या हटाएं और कॉन्फ़िगर करें:

• चौड़ाई

• पराकाष्‍ठा

• min-width

• max-width

• डिवाइस आईडी

• डिवाइस का नाम

परिवर्तन सीधे लिखे editor.Devicesजाते हैं , प्लगइन को GrapesJS डिवाइस सिस्टम के साथ पूरी तरह से एकीकृत रखते हुए।

📐 डिवाइस प्रीसेट

लोकप्रिय वास्तविक दुनिया स्क्रीन आकारों से शुरुआत करें।

इसके लिए प्रीसेट शामिल हैं:

• आईफोन

• आईपैड

• मैकबुक

• सामान्य Android डिवाइस

• कस्टम डिवाइस आकार

जब भी आपकी परियोजना की आवश्यकता हो, अपने स्वयं के उपकरणों के साथ प्रीसेट सूची का विस्तार करें।

🖥️ डिवाइस फ्रेम्स और ओरिएंटेशन

उत्तरदायी पूर्वावलोकन को वास्तविक डिवाइस का परीक्षण करने जैसा महसूस कराएं।

डिवाइस फ़्रेम के अंदर पृष्ठों का पूर्वावलोकन करें, पोर्ट्रेट और लैंडस्केप के बीच स्विच करें, और ड्रैग कंट्रोल के साथ कैनवास का स्वतंत्र रूप से आकार बदलें।

वास्तविक GrapesJS परियोजनाओं के लिए निर्मित

उत्तरदायी पैक गैर-तकनीकी उपयोगकर्ताओं के लिए GrapesJS-आधारित संपादकों के निर्माण टीमों के लिए विशेष रूप से उपयोगी है।

क्योंकि उपयोगकर्ता अनिवार्य रूप से करेंगे:

मोबाइल पर एक शैली बदलें और इसके बारे में भूल जाएं।

उन्हें मीडिया प्रश्नों और सीएसएस इनहेरिटेंस को समझने के लिए मजबूर करने के बजाय, रिस्पॉन्सिव पैक रिस्पॉन्सिव स्टाइलिंग को दृश्यमान, समझने योग्य और डीबग करने में आसान बनाता है।

यह उन डेवलपर्स के लिए भी है जिन्होंने उत्पन्न सीएसएस के माध्यम से खोज में एक दोपहर बिताई है, केवल यह पता लगाने के लिए कि एक एकल ब्रेकपॉइंट ओवरराइड पूरी समस्या के लिए जिम्मेदार था।

उत्तरदायी पैक क्यों?

स्टॉक GrapesJS:
डिवाइस को संपादित → स्विच करने के → एक डिवाइस चुनें → अनुमान लगाएं कि क्या बदल गया है।

उत्तरदायी पैक:
ब्रेकप्वाइंट देखें → ओवरराइड की पहचान करें → डिवाइस की तुलना करें → समस्या को ठीक करें।

उत्तरदायी डिजाइन सीएसएस के माध्यम से खुदाई की आवश्यकता नहीं होनी चाहिए।

अनुकूलता

• GrapesJS: 0.19 – 0.23

• मूल GrapesJS डिवाइस मैनेजर के साथ काम करता है

• प्रतिक्रियाशील शैलियाँ शैलियों GrapesJS मानक बनी रहती हैं

• कोई मालिकाना ब्रेकपॉइंट सिस्टम नहीं

एक बार खरीदें। अपडेट करते रहें।

एक खरीद में भविष्य के सभी अपडेट शामिल हैं।

डेवलपर्स और टीमों के लिए बनाया गया उत्पादन-ग्रेड उत्तरदायी GrapesJS संपादकों की शिपिंग के लिए।