उत्तरदायी डिजाइन में% इकाइयों का उपयोग करने पर क्या बिंदु है?

Question

मैं अपनी साइट को फिर से डिजाइन कर रहा हूं क्योंकि विभिन्न संकल्पों (अलग-अलग उपकरणों) पर भयानक लग रहा है, अधिकांश मार्गदर्शिकाएं और ट्यूटोरियल % और em पर निश्चित मानों की तुलना में भरोसा करते हैं। मैं अभी भी यह सीख रहा हूं इसलिए मैं सब कुछ पढ़ रहा हूं।

सोचा कि यह विभिन्न डिस्प्ले आकारों के साथ प्रश्न हल करेगा लेकिन फिर से: हमें कुछ विशिष्ट मुद्दों को ठीक करने के लिए कुछ और सीएसएस तैयार करना होगा।

यदि मुझे अतिरिक्त प्रदर्शन आकारों के लिए मीडिया-क्वेरी जोड़ने की आवश्यकता है, तो% का उपयोग क्यों करें? %% वास्तव में कोडिंग को कम करें? क्या कुछ आकारों के लिए कुछ अतिरिक्त सीएसएस जोड़ने की ज़रूरत है या क्या मैं कुछ गलत कर रहा हूं?

किसी भी सलाह के लिए धन्यवाद!

Answer 1

em आकारों का उपयोग करने का उद्देश्य उपयोगकर्ता को फ़ॉन्ट आकार के उपयोगकर्ता की पसंद से आधार बनाने की अनुमति देना है। मैं एक बड़े फ़ॉन्ट आकार का उपयोग कर सकता हूं क्योंकि मेरे पास एक विशाल मॉनीटर और खराब आंखों की दृष्टि है, जबकि कोई और एक छोटा फ़ॉन्ट पसंद कर सकता है। em इकाइयों का उपयोग करके, आपका डिज़ाइन हमारी दोनों फ़ॉन्ट वरीयताओं को समायोजित करेगा और फ़ॉन्ट आकार को किसी दिए गए मानक (जैसे "12 पॉइंट फ़ॉन्ट") को मजबूर करने के बजाय तदनुसार आकार देगा।

इसी तरह, प्रतिशत (%) इकाइयां आपके डिज़ाइन को विभिन्न ब्राउज़र आकारों का जवाब देने की अनुमति देती हैं। em इकाइयों के संयोजन के साथ प्रयोग किया जाता है, यह पाठ-आधारित तत्वों को मनमाने ढंग से फ़ॉन्ट आकार विकल्पों का जवाब देने और मनमाने ढंग से ब्राउज़र आकारों का जवाब देने के लिए लेआउट तत्वों की अनुमति देगा।

यह सभी मीडिया प्रकारों के लिए एक प्रतिक्रियाशील डिज़ाइन को डिजाइन करने के लिए पूरी तरह से स्वीकार्य है। Media queries का उद्देश्य अलग-अलग डिस्प्ले आकारों पर विभिन्न डिस्प्ले शैलियों को चाहते हैं, विभिन्न डिस्प्ले आकारों को "समर्थन" के लिए नहीं। एक उदाहरण मीडिया मीडिया पर प्रिंट मीडिया और सैन्स-सेरिफ़ फोंट पर सेरिफ़ फोंट का उपयोग करना होगा, क्योंकि उपयोगिता अध्ययनों से पता चला है कि इन फ़ॉन्ट चेहरों को मीडिया के इस प्रकार के लिए प्राथमिकता दी जाती है।

इसके अलावा, यह आपको मोबाइल उपकरणों जैसे कुछ स्थितियों के लिए कस्टम स्टाइल करने की अनुमति देता है, जहां आप यह मानना ​​चाहेंगे कि उपयोगकर्ता की सीमित मात्रा में बैंडविड्थ है और शायद अतिरिक्त छवियों पर काट दिया जा सकता है। या यदि आप कुछ निश्चित फोनों द्वारा प्रदान की गई माइक्रोस्कोपिक स्क्रीन के लिए अपनी सामग्री को पूरी तरह से अलग लेआउट में प्रदर्शित करना चाहते हैं।

Answer 2

% आपकी साइट को देखने की उपयोगकर्ता की विधि के प्रति उत्तरदायी होने की अनुमति देता है। मान लें कि आपके पास div है जो 100% पर है। यह पूरे खंड को भर देगा, भले ही यह किसी फोन या डेस्कटॉप पर हो।

आकारों के लिए अतिरिक्त सीएसएस भी जोड़ना ठीक होना चाहिए। जहां तक ​​मुझे पता है, आप % में कुछ तत्व प्रदर्शित कर सकते हैं और कुछ निश्चित px मान के साथ प्रदर्शित हो सकते हैं, हालांकि हो सकता है कि पृष्ठ कैसे सेट किया गया है या इसके साथ क्या देखा जा रहा है, इस पर निर्भर करता है।

Answer 3

उदाहरण के लिए।

आपकी वेबसाइट शीर्षलेख की 950 पीएक्स की चौड़ाई है; लेकिन एक मोबाइल डिवाइस में, यह 450px पर फिट हो सकता है;

तो, आप कुछ तत्वों को दोबारा बदलने और कुछ आकार के मुद्दों को संभालने के लिए मीडिया-क्वेरी का उपयोग करते हैं और हेडर चौड़ाई 450px पर सेट करते हैं;

लेकिन, यदि आप% मानों का उपयोग करते हैं, तो आप अपने हेडर div को अपने माता-पिता में 100% चौड़ाई आधार निर्धारित कर सकते हैं। तो आप केवल शरीर या कुछ कंटेनर div चौड़ाई बदल सकते हैं, सभी बच्चे अनुकूलित करने जा रहे हैं।

Answer 4

डायना,

मुझे खुशी है कि मैं इस सवाल में आए हूँ। मैंने सचमुच सिर्फ अपना पहला उत्तरदायी डिज़ाइन अपलोड किया जो फ़ॉन्ट आकार और चौड़ाई की बात करते समय प्रतिशत के प्रतिशत से 9 0% आधारित है।

बाहर नीचे की जांच: http://www.noxinnovations.com/portfolio/responsive/

जाहिर है, यह अद्भुत दिखता है नहीं, और छवि जगह से बाहर जिस तरह से लग रहा है ... लेकिन मेरा एक काम करते हैं और अपने ब्राउज़र विंडो का आकार बदलने, धीरे धीरे इसे बनाने के द्वारा छोटे और छोटे। मैंने प्रतिशत चौड़ाई निर्धारित करके किया था!

मेरा विश्वास करो, मैंने पिक्सेल के साथ इस उत्तरदायी डिजाइन परीक्षण करने की कोशिश की, और यह बहुत अच्छी तरह से बाहर नहीं हुआ। प्रतिशत चौड़ाई सुनिश्चित करता है कि संकल्प और पिक्सेल आयामों (प्रति से) के बावजूद डिज़ाइन हमेशा स्क्रीन के आकार को पूरा करेगा। इसके अलावा, मुझे एक CSS3 मीडिया क्वेरी का उपयोग करने की आवश्यकता नहीं थी, लेकिन जब आप की आवश्यकता होती है तो मैं केवल CSS3 मीडिया क्वेरीज़ का उपयोग करने का सुझाव दूंगा।

मेरी राय में, मैं शायद एक बड़ी स्क्रीन के लिए एक मीडिया क्वेरी होना चाहिए।

मुझे आशा है कि यह आप के रूप में ज्यादा के रूप में यह मुझे मदद मिली है मदद करता है! धन्यवाद, हारून