सीएसएस में ईएमएस की जगह ले रहे हैं?

Question

मैं लगभग rem units in CSS3 पढ़ रहा था, और थोड़ा उलझन में था। यदि आप rem का उपयोग करते हैं, तो क्या आप अभी भी em का उपयोग करते हैं या यह इसे बदलता है?

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

.selector { 
    margin-bottom:24px; 
    margin-bottom:2.4rem; 
    font-size:16px; 
    font-size:1.6rem; 
} 

या

.selector { 
    margin-bottom:24px; 
    margin-bottom:2.4em; 
    margin-bottom:2.4rem; 
} 

बस यह पता लगाने की remem की जगह लेता है, या अगर यह सिर्फ एक और इकाई अगर कोशिश कर रहा।

Answer 1

रेम रूट (एचटीएमएल) तत्व के लिए एम आकार है। इसका अर्थ यह है कि एक बार जब आप एचटीएमएल तत्व के फ़ॉन्ट आकार को परिभाषित करते हैं, तो आप उससे संबंधित सभी रिम इकाइयों को परिभाषित कर सकते हैं।

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

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

रेम सफारी 5, क्रोम, Firefox 3.6+, और यहां तक ​​कि इंटरनेट एक्सप्लोरर में समर्थित है, लेकिन older browsers के लिए आप अभी भी उन्हें, प्रतिशत या पिक्सल का उपयोग करने के लिए है।

Answer 2

नहीं, यह एक अलग इकाई है। em माता-पिता के फ़ॉन्ट-आकार पर आधारित है, जबकि rem रूट फ़ॉन्ट-आकार पर आधारित है, जो मुझे लगता है कि html तत्व का फ़ॉन्ट आकार है।

Answer 3

रेम सिर्फ एक और इकाई है, यह एम को प्रतिस्थापित नहीं करता है जैसे कि पिक्सेल को प्रतिस्थापित नहीं किया गया है।

Answer 4

पुराना विषय, लेकिन मुझे लगता है कि इसे कुछ और स्पष्टता की आवश्यकता है।

दोनों em और rem रिश्तेदार इकाइयां हैं, लेकिन remहमेशाhtml फ़ॉन्ट आकार ("रूट" तत्व) के बजाय विरासत में मिला फ़ॉन्ट आकार के सापेक्ष है।

कभी उपयोग px, या pt उस बात के लिए, स्क्रीन पर। फ़ॉन्ट आकार को हार्ड कोडिंग करके, आप उपयोगकर्ता की व्यक्तिगत पसंदीदा फ़ॉन्ट सेटिंग्स को अनदेखा करते हैं और कम सहकारी ज़ूमिंग करते हैं।

em और rem दोनों में खेलने के लिए एक उपयोगी भूमिका है। न तो सभी अवसरों के लिए एकदम सही है। यहाँ कुछ उदाहरण हैं:

उपयोग rem समझौता आकार से बचने के लिए:

ul#something li { font-size: 1.2rem; } 
    … or … 
ul#something li { font-size: 1.2rem; } 

पहले एक उत्तरोत्तर बड़ा आकार होने के बाद से em इकाई एक माता पिता li तत्व से प्राप्त कर लेंगे नेस्टेड सूचियों का परिणाम देगा।

उपयोग rem आकार स्वतंत्र रूप से स्थापित करने के लिए:

article { font-size: .8rem; }  /* article base font size */ 
article>h2 { font-size: 2rem; }  /* … except for h2 */ 

और, बेशक आप उपयोग कर सकते हैं दोनों: अब

div#something { font-size: 1.2rem; }  /* based on html size */ 
div#something>h2 { font-size: 2em; }  /* based on div#something */ 

दो साल ट्रैक नीचे,, और हम इसे उपयोग कर सकते हैं, विरासत ब्राउज़रों को सुरक्षित रूप से अनदेखा कर रहा है।