CSS में फोंट का आकार सेट करते समय, क्या मुझे प्रतिशत मान ( %) या का उपयोग करना चाहिए em? क्या आप फायदा बता सकते हैं?
जवाबों:
वहाँ एक सूची के अलावा वेब टाइपोग्राफी पर एक बहुत अच्छा लेख है ।
उनका निष्कर्ष:
शरीर पर निर्दिष्ट प्रतिशत (और सफारी 2 के लिए एक वैकल्पिक कैविट) के साथ, ईएमएस में आकार और पाठ-ऊंचाई को आज सामान्य उपयोग में सभी ब्राउज़रों में सटीक, पुन: प्रयोज्य पाठ प्रदान करने के लिए दिखाया गया था। यह एक ऐसी तकनीक है जिसे आप अपने किट बैग में रख सकते हैं और सीएसएस में पाठ को आकार देने के लिए एक सर्वोत्तम अभ्यास के रूप में उपयोग कर सकते हैं जो डिजाइनरों और पाठकों दोनों को संतुष्ट करता है।
line-heightsमें बिना किसी इकाई के बेहतर लिखा जाता है । यह कल्पना की अनुमति देता है, और पूरी तरह से परेशान ब्राउज़र से बचने के लिए पूरी तरह से बचता है जब यह em
1। उदाहरण के लिए iPhone 4 की भौतिक स्क्रीन चौड़ाई 640px है, लेकिन यह 320 "CSS" पिक्सेल (DPR = 2) के रूप में दिखाई देता है। तो वेबसाइट छोटी दिखाई नहीं देती है!
से http://archivist.incutio.com/viewlist/css-discuss/1408
%: कुछ ब्राउज़र फ़ॉन्ट-आकार के लिए प्रतिशत को हैंडल नहीं करते हैं, लेकिन 150% के रूप में 150% की व्याख्या करते हैं। (कुछ NN4 संस्करण, उदाहरण के लिए।) IE में नेस्टेड तत्वों पर प्रतिशत के साथ समस्याएं भी हैं। ऐसा लगता है कि IE मूल तत्व के सापेक्ष viewport के सापेक्ष प्रतिशत का उपयोग करता है। फिर भी एक और समस्या (हालांकि W3C स्पेक्स के अनुसार सही है), Moz / Ns6 में, आप उन तत्वों के सापेक्ष प्रतिशत का उपयोग नहीं कर सकते हैं जिनमें कोई निर्दिष्ट ऊँचाई / चौड़ाई नहीं है।
em: कभी-कभी ब्राउज़र गलत संदर्भ आकार का उपयोग करते हैं, लेकिन सापेक्ष इकाइयों में यह कम से कम समस्याओं वाला एक है। आप इसे पीएक्स के रूप में कभी-कभी व्याख्यायित कर सकते हैं।
पीटी: प्रस्तावों के बीच बहुत मुश्किल है, और प्रदर्शन के लिए उपयोग नहीं किया जाना चाहिए। हालांकि यह प्रिंट उपयोग के लिए काफी सुरक्षित है।
px: स्क्रीन पर एकमात्र विश्वसनीय निरपेक्ष इकाई। इसे प्रिंट में गलत तरीके से व्याख्या किया जा सकता है, क्योंकि एक बिंदु में आमतौर पर कई पिक्सेल होते हैं, और इस तरह सब कुछ हास्यास्पद रूप से छोटा हो जाता है।
दोनों फ़ॉन्ट-आकार को समायोजित करते हैं जो यह था। 1.5em 150% के समान है। एकमात्र लाभ पठनीयता प्रतीत होता है, जो भी आप सबसे अधिक आरामदायक होते हैं उसे चुनें।
वास्तविक अंतर तब स्पष्ट होता है जब आप इसका उपयोग फ़ॉन्ट-आकारों के लिए नहीं करते हैं। एक की स्थापना paddingकी 1emके समान नहीं है 100%। emहमेशा फ़ॉन्ट-आकार के सापेक्ष होता है। लेकिन %फ़ॉन्ट-आकार, चौड़ाई, ऊंचाई के सापेक्ष हो सकता है और शायद कुछ अन्य चीजें जिनके बारे में मुझे पता नहीं है।
यह देखते हुए कि (लगभग?) सभी ब्राउज़र अब पृष्ठ को एक पूरे के रूप में आकार देते हैं, केवल पाठ के बजाय, सुलभ फ़ॉन्ट के आकार के pxबनाम %बनाम emएस के साथ पिछले मुद्दे बल्कि मूट होते हैं।
तो, जवाब है कि यह शायद कोई फर्क नहीं पड़ता। आपके लिए जो कुछ भी काम करता है उसका उपयोग करें।
%अच्छा है क्योंकि यह सापेक्ष आकार बदलने की अनुमति देता है।
pxअच्छा है क्योंकि इसका उपयोग करते समय अपेक्षाओं को प्रबंधित करना काफी आसान है।
emउपयोगी हो सकता है जब लेआउट तत्वों के लिए भी उपयोग किया जाता है क्योंकि यह पाठ आकार से संबंधित आनुपातिक आकार के लिए अनुमति दे सकता है।
emउदाहरण के लिए बनाम । उस तरफ से, मुझे लगता है कि एसओ पर जवाब कालातीत होने का प्रयास करना चाहिए - यह एक ज्ञान का आधार है। प्रोग्रामिंग का विकिपीडिया :) जैसा कि विकिपीडिया तथ्यों को प्रतिबिंबित करने के लिए अपडेट किया गया है, इसलिए SO को जवाब देना चाहिए, मेरी विनम्र राय में।
सीएसएस इकाइयों %और के बीच अंतर के बारे में em।
जहां तक मैं समझता हूं (कम से कम सैद्धांतिक रूप से / वैचारिक रूप से, लेकिन संभवतः इन दो इकाइयों को ब्राउज़रों में कैसे लागू किया जा सकता है) ये दोनों इकाइयां बराबर हैं, यानी यदि आप अपने emमूल्य को कई गुना बढ़ाते हैं 100और फिर उसी के emसाथ प्रतिस्थापित करते हैं तो %वही होना चाहिए?
अगर वास्तव में em और% के बीच कुछ वास्तविक अंतर है तो क्या कोई इसे समझा सकता है (या स्पष्टीकरण के लिए लिंक प्रदान कर सकता है)?
(मैं अपनी इस टिप्पणी को जोड़ना चाहता था, जहां यह होगा, अर्थात उत्तर के ठीक नीचे, "Liam, answered Sep 25 '08 at 11:21"क्योंकि मैं यह भी जानना चाहता हूं कि उनका उत्तर क्यों अस्वीकृत किया गया था, लेकिन मैं यह पता नहीं लगा सका कि मुझे अपनी टिप्पणी कैसे देनी है और इसलिए लिखना था यह "धागा वैश्विक" उत्तर)
जैसा कि गाल्व का उल्लेख है, वेब टाइपोग्राफी के लिए px सबसे विश्वसनीय है, जैसा कि आप पेज पर जो कुछ भी करते हैं वह ज्यादातर कंप्यूटर मॉनीटर के संदर्भ में किया जाता है। पूर्ण आकार के साथ समस्या यह है कि कुछ ब्राउज़र (IE) वेब-पेज पर पिक्सेल-मूल्य तत्वों को स्केल नहीं करेंगे, इसलिए जब आप ज़ूम इन / आउट करने का प्रयास करते हैं, तो उन तत्वों को छोड़कर सब कुछ समायोजित हो जाता है।
मुझे नहीं पता कि IE8 इसे ठीक से संभालता है, लेकिन सभी अन्य ब्राउज़र विक्रेता पिक्सेल को ठीक से संभालते हैं और यह अभी भी एक अल्पसंख्यक मामला है जहां उपयोगकर्ता को पाठ को छोटा करने / कम करने की आवश्यकता है (एसओ पर यह पाठ बॉक्स शायद अपवाद रहा है)। यदि आप वास्तव में गंदा होना चाहते हैं, तो आप हमेशा अपने टेक्स्ट के आकार को बड़ा बनाने के लिए एक जावास्क्रिप्ट फ़ंक्शन जोड़ सकते हैं और उपयोगकर्ता को "छोटा" / "बड़ा" बटन प्रदान कर सकते हैं।
याहू यूजर इंटरफेस लाइब्रेरी ( http://developer.yahoo.com/yui/ ) में ब्राउज़र विशिष्ट सेटिंग्स को "रीसेट" करने के लिए उपयोग की जाने वाली आधार सीएसएस कक्षाओं का एक अच्छा सेट है ताकि साइट को प्रदर्शित करने का आधार सभी के लिए समान हो (समर्थित) ब्राउज़रों।
YUI के साथ एक प्रतिशत का उपयोग करने वाला है।