ऊंचाई या सीमा-त्रिज्या के लिए उपयोग किए गए सीएसएस एम माप का उपयोग कैसे किया जाता है?

Question

मैं समझता हूं कि "em" माप फ़ॉन्ट आकार के लिए एक सापेक्ष इकाई है, जिसमें तत्व के फ़ॉन्ट आकार के सापेक्ष है, यदि यह एक पूर्ण इकाई में निर्दिष्ट है जैसे कि px, या ब्राउज़र में डिफ़ॉल्ट फ़ॉन्ट-आकार में।

लेकिन मैं यह समझने की कोशिश कर रहा हूं कि एक div तत्व की तरह, बॉक्स तत्व के सीमा-त्रिज्या के माप के रूप में एम का उपयोग कैसे किया जाता है। मुझे लगता है कि यह बॉक्स बॉक्स की चौड़ाई या ऊंचाई के लिए माप के रूप में एम का उपयोग करने से संबंधित है।

क्या यह अभी भी फ़ॉन्ट-आकार से संबंधित है? कैसे, विशेष रूप से, यह मापा जाता है? सीमा-त्रिज्या की गणना कैसे की जाती है इसके बारे में स्पष्टीकरण कि मैं सभी को पीएक्स इकाइयों पर आधारित प्रतीत होता हूं।

Answer 1

मैं आपको प्रश्न गलत समझ सकता हूं, लेकिन मुझे लगता है कि यह इस तरह काम करता है। यदि फ़ॉन्ट का आकार 12 पीएक्स है और आप 1em के सीमा त्रिज्या के साथ एक बॉक्स बनाते हैं, तो उसके पास 12px की सीमा त्रिज्या होगी (13px यदि यह 13px है)। पाठ के आकार के बावजूद पाठ के समान अनुपात में रहने के लिए आपको बॉक्स के सीमा त्रिज्या की आवश्यकता होने पर यह उपयोगी होता है। instants के लिए, यदि आप इसे में पाठ के साथ एक बॉक्स था, मान लीजिए कि:

<style> 
    // lets say the browser gives the text a default size of 16px on a pc 
    .box {border-radius:5px}// lets say the box's size scales with the text 
</style> 

यह है जैसे कि बॉक्स लगभग पूरी तरह से दौर कोनों था लगेगा। लेकिन आइए एक आईफोन पर कहें, यह पाठ को 80px (असाधारण) का डिफ़ॉल्ट आकार देता है, ऐसा लगता है कि बॉक्स में लगभग फ्लैट कोनों थे। समाधान का उपयोग कर बॉक्स के साथ बॉक्स के कोनों को स्केल करना है।

Answer 2

ऐसा लगता है कि यह फ़ॉन्ट आकार से संबंधित है। अंत में यह अभी भी माप की एक इकाई है, जैसे पीएक्स।

यह example आपको यह कैसे काम करता है इस बारे में एक बेहतर विचार दे सकता है।

मार्कअप:

<div id="A"></div> 
<div id="B"></div> 
<div id="text-height"></div> 
<p>Some text</p> 

<div id="C"></div> 
<div id="D"></div> 

सीएसएस:

p { 
    line-height: 1em; 
    background: grey; 
    display: inline-block; 
    position: relative; 
    top: -4px; 
} 
#A { 
    height: 4em; 
    background: red; 
    width: 1em; 
    display: inline-block; 
} 
#B { 
    height: 2em; 
    background: blue; 
    width: 1em; 
    display: inline-block; 
} 
#text-height { 
    height: 1em; 
    background: green; 
    width: 1em; 
    display: inline-block; 
} 
#C, #D { 
    height: 4em; 
    width: 4em; 
    display: inline-block; 
} 
#C { 
    border-radius: 2em; 
    background: red; 
} 
#D { 
    border-radius: 1em; 
    background: blue; 
} 

छवि:

Answer 3

मैंने ब्राउज़र में यह कोशिश की और it is still relative to the font-size property of the element। यदि फ़ॉन्ट-आकार परिभाषित नहीं किया गया है, तो यह अगले माता-पिता से प्राप्त होता है जिसमें फ़ॉन्ट-आकार, या ब्राउज़र डिफ़ॉल्ट होता है (which is 16px usually; टीआईएल)।