Studio Two Editor: एलिमेंट का साइज सेट करना
यह आर्टिकल नवंबर 2026 में लॉन्च हुए नए Studio Two Editor के बारे में है। अगर आप तय नहीं कर पा रहे हैं कि आप Studio एडिटर इस्तेमाल कर रहे हैं या Studio Two Editor, तो यहां ज़्यादा जानकारी देखें।
Studio Two Editor में आप हर एलिमेंट का सटीक साइज सेट कर सकते हैं, ताकि आपका डिजाइन किसी भी डिवाइस के हिसाब से अपने-आप एडजस्ट हो जाए। किसी एलिमेंट की सटीक माप सेट करने के लिए, कैनवस या इंस्पेक्टर पैनल में उसका साइज बदलें।
साइज बदलते समय आपको px* दिखाई देगा, जो पिक्सेल में दिखाई जाने वाली यूनिट है। एलिमेंट के रिस्पॉन्सिव बिहेवियर के आधार पर, यह हर ब्रेकपॉइंट के हिसाब से स्केल होती है। अगर डिफ़ॉल्ट बिहेवियर आपके डिजाइन के लिए सही नहीं है, तो उसे बदलें या चौड़ाई और ऊंचाई को सीधे कंट्रोल करने के लिए एडवांस्ड सेटिंग्स ऑन करें।
एलिमेंट का साइज बदलना
आप जिस तरह डिजाइन करना पसंद करते हैं, उसके आधार पर एलिमेंट का साइज बदलने का तरीका चुनें:
कैनवस पर: पृष्ठ पर एलिमेंट को सिलेक्ट करने के लिए उस पर क्लिक करें और साइड हैंडल को तब तक ड्रैग करें, जब तक एलिमेंट मनचाहे साइज का न हो जाए। ड्रैग करते समय, आप पिक्सेल में एलिमेंट का सटीक साइज देख सकते हैं।
इंस्पेक्टर पैनल में: एलिमेंट पर क्लिक करें और उसकी सटीक चौड़ाई और ऊंचाई देखने या बदलने के लिए इंस्पेक्टर पैनल खोलें।
मेज़रमेंट यूनिट के रूप में px* का इस्तेमाल करना
इंस्पेक्टर पैनल के साइज सेक्शन में एक रिलेटिव मेज़रमेंट यूनिट होती है, जो सिर्फ Studio Two Editor में उपलब्ध है—px*।
'px' के आगे लगे एस्टरिस्क (*) का मतलब है कि साइज उस ब्रेकपॉइंट के हिसाब से रिलेटिव है जिस पर आप अभी काम कर रहे हैं। उदाहरण के लिए, अगर आप डेस्कटॉप से मोबाइल ब्रेकपॉइंट पर स्विच करते हैं, तो px* में एलिमेंट की चौड़ाई और ऊंचाई भी उसी हिसाब से कम हो जाएगी।
px* पिक्सेल में वैल्यू दिखाता है, जबकि बैकग्राउंड में वास्तविक मेज़रमेंट रिस्पॉन्सिव रहता है। इस्तेमाल की जा रही कैलकुलेशन और रिस्पॉन्सिव साइज यूनिट (जैसे प्रतिशत, आस्पेक्ट रेशियो आदि) देखने के लिए, पैनल में px* पर होवर करें।
रिस्पॉन्सिव बिहेवियर चुनना
यह तय करने के लिए रिस्पॉन्सिव बिहेवियर सेट करें कि अलग-अलग ब्रेकपॉइंट पर एलिमेंट का साइज बदलेगा या नहीं और बदलेगा तो कैसे। हर एलिमेंट शुरुआत में डिफ़ॉल्ट बिहेवियर के साथ आता है, लेकिन आप इसे अपने डिजाइन के लिए बेहतर बिहेवियर से बदल सकते हैं।
एलिमेंट का रिस्पॉन्सिव बिहेवियर बदलने के लिए:
संबंधित एलिमेंट चुनें।
एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
पर क्लिक करें।
डिज़ाइन टैब पर क्लिक करें।
साइज़ के तहत रिस्पॉन्सिव बिहेवियर ड्रॉपडाउन पर क्लिक करें।
कोई नया रिस्पॉन्सिव बिहेवियर चुनें।
ड्रॉपडाउन में मौजूद ऑप्शन कैसे दिखेंगे, इसका एनिमेशन देखने के लिए उन पर होवर करें।
एडवांस्ड साइज़ सेटिंग्स का इस्तेमाल करना
अगर आप px* और रिस्पॉन्सिव बिहेवियर पर निर्भर रहने के बजाय किसी एलिमेंट के मेजरमेंट, जैसे px, % या vh, को सीधे कंट्रोल करना चाहते हैं, तो एडवांस्ड सेटिंग्स का इस्तेमाल करें।
एडवांस्ड सेटिंग्स ऑन करने पर वे आपके चुने गए एलिमेंट के लिए सभी ब्रेकपॉइंट्स पर लागू होती हैं। आसान ऐक्सेस के लिए उस एलिमेंट पर एडवांस्ड सेटिंग्स मोड ऑन रहता है, लेकिन आप इसे कभी भी ऑफ कर सकते हैं।
एडवांस्ड सेटिंग्स ऑन करने के लिए:
संबंधित एलिमेंट चुनें।
एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
(इंस्पेक्टर में) सबसे ऊपर दाईं ओर मौजूद मोर ऐक्शंस आइकन
पर क्लिक करें।एडवांस्ड सेटिंग्स के आगे वाला टॉगल ऑन करें।
ज़रूरत के मुताबिक साइज़िंग एडिट करें: विड्थ, हाइट और मिन व मैक्स वैल्यू।
टिप: दूसरी यूनिट पर स्विच करने के लिए (जैसे px से %), इंस्पेक्टर में उस यूनिट पर क्लिक करें। ऐसा करने से एलिमेंट के लिए उपलब्ध मेज़रमेंट्स की लिस्ट खुलती है।
