2013-04-06 7 views
26

मैं एक उत्तरदायी वेबसाइट बना रहा हूं और मैं सोच रहा हूं कि मुझे किस इकाई का उपयोग करना चाहिए? मैंने माप के लिए पिक्सल (पीएक्स) का उपयोग करके कई साइटें देखी हैं और मैंने कुछ प्रतिशत (%) का उपयोग करके देखा है। क्या उत्तरदायी डिजाइन करने का कोई पसंदीदा - या सही तरीका है?उत्तरदायी डिजाइन करते समय पसंदीदा इकाई क्या है?

मुझे प्रतिशत का उपयोग करना मुश्किल लगता है, क्योंकि यह गणना को कठिन बनाता है और मैं 2.754% जैसे मानों के साथ समाप्त हो गया हूं और इसलिए चौड़ाई/मार्जिन इत्यादि सेट करते समय पिक्सल आसान लगता है, यह केवल सरल जोड़ है और घटाव, लेकिन मैंने पढ़ा है कि यह "भविष्य का सबूत" या ऐसा कुछ नहीं है और यदि उपयोगकर्ता ब्राउज़र विंडो में ज़ूम करता है तो ठीक से स्केल नहीं करेगा। क्या यह अभी भी सच है?

यदि आपके पास कोई अनुभव या विशेषज्ञता है, तो कृपया साझा करें! मुझे यह सुनना अच्छा लगेगा कि आपको क्या कहना है!

धन्यवाद!

+1

_Responsive_ और _absolute values_ (पिक्सल की तरह) एक-दूसरे से विरोधाभास करते हैं। अक्सर आपके सादे गुणों ('चौड़ाई') के लिए सापेक्ष मूल्यों का उपयोग करना और न्यूनतम/अधिकतम (' अधिकतम-चौड़ाई', 'न्यूनतम-चौड़ाई') के लिए पूर्ण मानों का उपयोग करना आसान होता है। इस तरह यह अभी भी उत्तरदायी रहता है, लेकिन आप स्टाइल कंटेनर की चौड़ाई पर कुछ धारणाएं कर सकते हैं। – Zeta

+0

देखें [यह प्रश्न] (http://stackoverflow.com/questions/12450961/responsive-layout-px-em-or) – Bigood

+0

मुझे लगता है कि उत्तर अधिकतर सही है। वैसे भी, सीएसएस में बहुत सी इकाइयां हैं। क्रिस कोयियर से यह पोस्ट देखें: http://css-tricks.com/the-lengths-of-css/ – pzin

उत्तर

4

पिक्सेल में न्यूनतम चौड़ाई और अधिकतम चौड़ाई के साथ प्रतिशत का उपयोग करें। यह आपके divs को बहुत छोटा या बहुत बड़ा बनाने के प्रतिशत को रोकता है। उदाहरण के लिए

div { 
    width:100%; //full width of browser 
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding 
} 
9

बेशक आपको प्रतिशत का उपयोग करना होगा। लेकिन min-height, max-height, min-width, max-width सीएसएस कुंजी के साथ।

अगली पीढ़ी

VW और VH लिए । Vw खिड़की की चौड़ाई का 1/100 वां है और vh खिड़की की ऊंचाई का 1/100 वां है। उत्तरदायित्व के लिए वे नई इकाइयां बनने जा रहे हैं।

+0

मैंने इसे फ़ायरफ़ॉक्स 20 पर आजमाया है। यह काम करता है। – zkanoca

+0

हाँ मुझे लगता है कि वे कुछ ब्राउज़रों में काम करते हैं, जहां गैर-प्रयोगात्मक विकास के लिए तैयार नहीं है, हालांकि: पी –

29

बक्से के आकार की तरह लेआउट प्रकार बातों के लिए, आप % उपयोग करने के लिए है क्योंकि आप आमतौर पर कई कॉलम उनके माता पिता का एक प्रतिशत है कि एक दूसरे के ऊपर पर एक निश्चित ब्रेकपाइंट पर ढेर के रूप में आकार होगा (width:100%) चाहते हैं । कोई अन्य इकाई आपको % जैसी जगहों का 100% भरने की अनुमति नहीं देगी।

पैडिंग/मार्जिनem का उपयोग करें, आमतौर पर आप अपने टेक्स्ट के आकार के सापेक्ष अपने तत्वों को स्थानांतरित करना चाहते हैं। em (एक 'एम' चरित्र के साथ) आप आसानी से कह सकते हैं कि मैं यहां लगभग 1 वर्ण अंतर चाहता हूं।

सीमाओं के लिए आप px या em का उपयोग कर सकते हैं, हालांकि इसमें कोई अंतर है। यदि आप अपनी सीमा को सभी उपकरणों पर एक पिक्सेल चौड़ा दिखाना चाहते हैं, तो 1px का उपयोग करें। यह सभी उपकरणों पर एक पिक्सेल नहीं हो सकता है, उदाहरण के लिए, उच्च घनत्व प्रदर्शित 1px2px में परिवर्तित करें। यदि आप चाहते हैं कि आपकी सीमा आपके फ़ॉन्ट के आधार पर आकार हो, तो em का उपयोग करें।

के लिए फोंट उपयोग em (या %), em के उपयोग किया जाता है माता-पिता के माध्यम से बच्चों के लिए और यह सिर्फ एक अच्छे इकाई px से अधिक के साथ काम करने के लिए।

+1

यह नियमों के एक सेट से बहुत दूर है। यह उत्तर एक अच्छी मार्गदर्शिका है लेकिन ऐसे कई मामले हैं जहां अन्य इकाइयों का उपयोग करना बहुत बेहतर काम कर सकता है –

+1

सीमाओं के लिए आप 'पतली', 'मध्यम' और 'मोटी' का भी उपयोग कर सकते हैं। वे '1px',' 3px' और '5px' के अनुरूप होते हैं लेकिन आपके ज़ूम आदि के आधार पर स्केलेबल भी होते हैं। वे 'em' से भी बेहतर होते हैं क्योंकि 'em' के साथ परिभाषित सीमा बस गायब हो जाती है जब आप ज़ूम आउट करते हैं और इसकी चौड़ाई '1px' से कम हो जाता है। – tomasz86

संबंधित मुद्दे