पिक्सेल रूपांतरण के लिए ईएमएस - क्यों 62.5% और 6.25% नहीं?

Question

मुझे पता है कि हम में से कई हमारे सीएसएस में शरीर तत्व पर फ़ॉन्ट आकार को 62.5% पर सेट करने से परिचित हैं। इसका मतलब है कि 1em 10px के बराबर होगा और चीजों को पिक्सेल को सही रखने में मदद करता है लेकिन फ़ॉन्ट्स को स्केल करने की भी अनुमति देता है।

तो इसका मतलब यह नहीं होगा कि इसे 6.25% पर सेट करना 1em = 1px के बराबर होगा? Decimals के साथ गड़बड़ करने के बजाय एक आसान रूपांतरण की तरह लगता है ...

---

धन्यवाद दोस्तों! मुझे एम और इसके इतिहास (डिजाइन डिग्री) के बारे में काफी जानकारी है, लेकिन मुझे यकीन है कि दूसरों को यह उपयोगी लगेगा :)

जहां तक ​​1em = 1px है, मुझे नहीं लगता कि यह अवांछनीय कैसे है। एम आपकी इकाइयों के बावजूद वर्ग है (चाहे वह अंक या पिक्सेल हों) और कोई भी अपना प्रकार 1px पर सेट नहीं करेगा (जैसे कोई भी मुद्रित प्रकार को 1pt पर सेट नहीं करेगा)। इसके अलावा, यहां तक ​​कि आपका आलेख यह भी स्वीकार करता है कि अधिकांश डिजिटल टाइपफेस में, पूंजी "एम" आम तौर पर 1em से छोटी होती है, और यह कि केवल बिंदु आकार का प्रतिबिंब है (48pt प्रकार em के लिए 48pt वर्ग द्वारा 48pt प्रस्तुत करेगा, 12pt प्रकार 12x12, इत्यादि पैदा करेगा)

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

Answer 1

तर्कसंगत रूप से, लेकिन फिर आप अपने पैमाने पर नियंत्रण खो देते हैं। यह न भूलें कि शीर्षक आमतौर पर उनके रैंक के अनुपात में उसी आकार का उत्तराधिकारी होगा (यानी <h1> सबसे बड़ा होगा, <h2> थोड़ा छोटा होगा)। यदि आप उन तत्वों को कम करना चाहते हैं, तो आपको बहुत सारे दशमलव प्लेसहोल्डर्स के साथ एम मानों का उपयोग करना होगा। कल्पना करें <h4> font-size: 0.005em।

या इससे भी बदतर, यदि आप फोंट को बड़े पैमाने पर स्केल करना चाहते हैं, तो आप संभावित रूप से font-size: 40em या कुछ हास्यास्पद देख सकते हैं।

संक्षेप में, 1em = 10px फोंट के स्केल किए गए मानों के लिए अधिक व्यावहारिक है। जबकि 1: 1 पैमाने कागज पर समझ में आ सकता है, यह खुद को समझदार और रखरखाव योग्य सीएसएस के लिए अच्छी तरह से उधार नहीं देता है।

Answer 2

रूपांतरण सरल हो सकता है, लेकिन एक एम का मतलब यह नहीं होगा कि इसका क्या अर्थ है।

1em किसी दिए गए फ़ॉन्ट में पूंजीकृत "एम" होने पर चौड़ाई के बराबर होना चाहिए। यदि पत्र एम की चौड़ाई 1 पिक्सेल है, तो आपका फ़ॉन्ट अपठनीय होने जा रहा है।

सभी की

http://en.wikipedia.org/wiki/Em_(typography)

Answer 3

सबसे पहले, यह न मानें कि 1 उन्हें 10 पिक्सल के बराबर होगा। एक एम यूनिट टाइपोग्राफी का उपयोग करने के लिए सीधे सहसंबंध में है। अगर किसी के पास 16 पिक्सल का फ़ॉन्ट आकार है, तो 62.5% वास्तव में 10 पिक्सेल (16 * 0.625 = 10) है, लेकिन जब कोई व्यक्ति अपना डिफ़ॉल्ट फ़ॉन्ट आकार संशोधित करता है तो यह स्पष्ट रूप से बदल जाएगा।

दूसरा, यह मैंने पहली बार बेस बॉडी font-size के लिए 62.5% का उपयोग करने के बारे में सुना है। मैं हमेशा Sane CSS Typography by Owen Briggs के आधार पर 76% के font-size का उपयोग करता हूं।

आखिरकार, अपने प्रश्न का उत्तर देने के लिए, हाँ आप 6.25% के फ़ॉन्ट आकार का उपयोग कर सकते हैं और फिर के बजाय का उपयोग कर सकते हैं। हालांकि, मैं इस पद्धति को अत्यधिक हतोत्साहित करता हूं। टाइपोग्रावी की दुनिया में, एक एम the width of the capital letter 'M' होने का इरादा है।यह विधि पूरी तरह से उस सामान्य अभ्यास का उल्लंघन करती है और भविष्य में आपके सीएसएस को बनाए रखने वाले किसी भी व्यक्ति को गंभीरता से भ्रमित कर देगी।

Answer 4

पूरी "62.5% = 10 पीएक्स" चीज मूल रूप से तोड़ दी गई है - 62.5% ब्राउज़र, उपयोगकर्ता की सेटिंग्स और विशेष रूप से न्यूनतम फ़ॉन्ट आकार सेटिंग के आधार पर 10px हो सकता है या नहीं। इसलिए आप केवल पिक्सल में डिज़ाइन नहीं कर सकते हैं और फिर 62.5% = 10px धारणा पर ईएमएस में "रूपांतरित" कर सकते हैं, क्योंकि आपका डिज़ाइन हर समय टूट जाएगा। यदि आप एक पिक्सेल-परिपूर्ण डिज़ाइन चाहते हैं, तो आपको यूनिट के रूप में पिक्सल का उपयोग करना होगा। यदि आप एक लचीली डिज़ाइन चाहते हैं, तो आपको वेब साइट के विभिन्न तत्वों के लिए उपयुक्त इकाइयों के बारे में सोचना होगा - तत्वों के लिए ईएमएस जो पाठ आकार के लिए प्रासंगिक स्केल करना चाहिए, तत्वों के लिए प्रतिशत जो तत्वों के लिए स्केल करना चाहिए और तत्वों के लिए पिक्सेल (छवियों की तरह) जो बिल्कुल स्केल नहीं करना चाहिए।

कोई भी व्यक्ति जिसमें फ़ॉन्ट आकार शामिल है: मूल रूप से 62%% उनके सीएसएस में वेब के लिए डिज़ाइन नहीं किया जाता है।

Answer 5

आपको यह भी उपयोगी मिल सकता है। http://pixel2em.kleptomac.com यह कनवर्टर के लिए एक ऑनलाइन पिक्सेल प्रदान करता है और आप एक पूर्ण सीएसएस फ़ाइल रूपांतरण भी कर सकते हैं।

Answer 6

एक अद्यतन संस्करण http://pixelconverter.kleptomac.com पर उपलब्ध है यह पिक्सल, बिंदु, एम, प्रतिशत को परिवर्तित करने के लिए एक ऑनलाइन यूनिट कनवर्टर है। यह इन इकाइयों में से किसी से रूपांतरण का समर्थन करता है।

Answer 7

शानदार सवाल।

मैं अनुकूली/उत्तरदायी वेब डिजाइन और लोचदार टेम्पलेट्स के लिए एक दिलचस्प प्रस्ताव के रूप में 6.25% देखें।

rem इकाई के साथ विशेष रूप से फ़ॉन्ट आकार का आकार यह आपके तर्क के लिए स्वयं को उधार देता है ... 1: 1 अनुपात केवल आसान है।

rem: "रूट एम" ... मूल तत्व का फ़ॉन्ट आकार। http://www.w3.org/TR/css3-values/

से इस rem उदाहरण देखें: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ 

और अब अपने सुझाव के साथ ...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */ 
body { font-size: 14px; font-size: 14rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 24rem; } /* =24px */ 

... मेरी JSBin उदाहरण के साथ खेलते हैं: Testing CSS3 "rem" Units for Elastic Content

ए 1: 1 एम से पीएक्स अनुपात में एल होना चाहिए निबंध टाइपो।

रेम नोट्स: उचित सीएसएस फिर सेट करता है के साथ और body दोनों px और rem अपनी शैली में आधार font-size घोषित शान से नीचा ... तो rem समर्थित है, और घोषणा की px के बाद, यह मूल्य लागू किया जाता है है। अन्यथा ब्राउज़र px पर वापस आ जाता है।

rem के लिए समर्थन (विशेष रूप से मोबाइल पर) निर्धारित करना। कृपया इस पृष्ठ को किसी भी/सभी ब्राउज़रों/उपकरणों के साथ दबाएं जो आप कर सकते हैं ...http://ahedg.es/w/rem.html

Answer 8

मैंने एक ही काम करने की कोशिश की, लेकिन मार्जिन और पैडिंग के लिए रिम्स का उपयोग करने के मुद्दे में भाग गया। font-size से 62.5% को इन मुद्दों से बचाता है।

p { 
    font-size: 1px; 
    margin: 9px; /* WTF?! */ 
} 

अजीब है, है ना:

उदाहरण के लिए, निम्नलिखित सीएसएस

html { 
    font-size: 6.25% /* 16px * .0625 => 1px */ 
} 

p { 
    font-size: 1rem; 
    margin: 1rem; 
} 

के रूप में renders? मुझे लगता है कि यह न्यूनतम फ़ॉन्ट आकार के साथ कुछ अजीब संघर्ष के कारण होता है।

---

अब, अगर आप दूसरी तरफ font-size: 62.5% का उपयोग करें, चीजों को प्रस्तुत करना अपेक्षा के अनुरूप:

html { 
    font-size: 62.5% /* 16px * .625 => 10px */ 
} 

p { 
    font-size: .1rem; 
    margin: .1rem; 
} 

के रूप में प्रस्तुत करता है:

p { 
    font-size: 1px; 
    margin: 1px; 
}