रेस्पॉन्सिव और डिवाइस-वार रूप
किसी स्क्रीन के मोबाइल और डेस्कटॉप संस्करण बनाइए और उन्हें आपस में मिलाकर रखिए।
अंतिम अपडेट:
कोई रूप बनाना
बस माँगिए, या स्क्रीन पर डिवाइस नियंत्रण इस्तेमाल कीजिए:
लैंडिंग पेज का मोबाइल संस्करण बनाओ।
यह रूप कैनवास पर एक नई स्क्रीन है, जो लक्षित चौड़ाई के लिए ढाली गई है — यह बहती हुई रीसाइज़िंग नहीं है। लेआउट सचमुच दोबारा जमाया जाता है: कई कॉलम वाले सेक्शन एक के नीचे एक हो जाते हैं, नेविगेशन सिमट जाता है, टाइप छोटा हो जाता है।
लागत
किसी स्क्रीन को दूसरे डिवाइस आकार में बदलने का शुल्क प्रति स्क्रीन उतना ही है जितना दोबारा बनाने का, क्योंकि वह असल में यही है। आठ स्क्रीन बदलने पर आठ गुना लगेगा — इसलिए पहले बैलेंस देख लेना ठीक रहता है।
दोनों रूपों को मिलाकर रखना
रूप अलग-अलग स्क्रीन हैं, इसलिए डेस्कटॉप संस्करण में बाद में किया गया बदलाव अपने आप मोबाइल में नहीं जाता। दो रास्ते:
- दोनों के लिए साफ़ कहिए: “डेस्कटॉप और मोबाइल दोनों लैंडिंग पेज पर CTA बदलकर ‘मुफ़्त शुरू करें’ करो।”
- या पहले डेस्कटॉप डिज़ाइन पूरा कीजिए और अंत में एक बार रूप बनवा लीजिए। यही आम तौर पर सस्ता क्रम है।
थीम साझा रहती है
दोनों रूप प्रोजेक्ट की थीम इस्तेमाल करते हैं, इसलिए रंग और फ़ॉन्ट के बदलाव अपने आप दोनों पर लगते हैं। सिर्फ़ लेआउट हर रूप का अपना होता है।
एक्सपोर्ट किया कोड
एक्सपोर्ट किया कोड उसी स्क्रीन को दिखाता है जिसे आपने एक्सपोर्ट किया। अगर आपको दो तय लेआउट के बजाय एक सचमुच रेस्पॉन्सिव कार्यान्वयन चाहिए, तो डेस्कटॉप स्क्रीन एक्सपोर्ट करके उसे ढालिए, या दोनों एक्सपोर्ट करके अपने ब्रेकपॉइंट पर मिला दीजिए — देखिए कोड एक्सपोर्ट।
क्या यह लेख उपयोगी रहा?
संबंधित लेख
स्क्रीन संपादित करना
डिज़ाइन बदलने के तीन तरीके — चैट, संपादन मोड और थीम — और कब कौन-सा सही औज़ार है।
थीम और स्टाइल गाइड
प्रोजेक्ट की थीम कैसे काम करती है, उसे सुरक्षित तरीक़े से कैसे बदलें, और रंग कभी स्क्रीन-दर-स्क्रीन क्यों नहीं बदलने चाहिए।
कोड एक्सपोर्ट (HTML, React, Tailwind)
किसी एक स्क्रीन या पूरे प्रोजेक्ट को प्रोडक्शन-तैयार फ्रंटएंड कोड के रूप में एक्सपोर्ट कीजिए।