वेबसाइट स्रोत में, मैंने कभी-कभी देखा है कि डेवलपर्स remयूनिट का उपयोग करते हैं । क्या यह समान है em? मैंने यह देखने की कोशिश की कि यह वास्तव में क्या करता है, लेकिन यह किसके सापेक्ष है?
एचटीएमएल
<div>Hello <p>World</p></div>
सीएसएस
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
जवाबों:
EMs अपने माता-पिता के फ़ॉन्ट आकार के सापेक्ष हैं
REMs आधार फ़ॉन्ट-आकार के सापेक्ष हैं
यह महत्वपूर्ण है जब मध्यवर्ती कंटेनर फ़ॉन्ट आकार बदलते हैं। EMs वाले बाल तत्व प्रभावित होंगे, REM का उपयोग करने वाले नहीं करेंगे।
जबकि एम अपने प्रत्यक्ष या निकटतम माता-पिता के फ़ॉन्ट-आकार के सापेक्ष है , रेम केवल html (रूट) फ़ॉन्ट-आकार के सापेक्ष है।
em एक डिजाइन के एक क्षेत्र को नियंत्रित करने की क्षमता देता है। के रूप में, उस विशिष्ट क्षेत्र में प्रकार को अपेक्षाकृत बड़े पैमाने पर। रेम पूरे पेज को आसानी से टाइप करने की क्षमता देता है।
यहाँ एक उदाहरण है। परिवर्तन के divsसाथ आकार remजैसा कि हम तत्व font-sizeको बदलते हैं html। जबकि वे आकार के साथem केवल परिवर्तन हम बदल के रूप में font-sizeकी div।
$(function() {
var htmlSize = $('input#html');
htmlSize.change(function() {
$('html').css('font-size', htmlSize.val() + 'px');
});
var divSize = $('input#div');
divSize.change(function() {
$('div').css('font-size', divSize.val() + 'px');
});
});* {
float: left;
font-size: 20px;
margin:2px;
}
label {
clear:both;
}
div {
border: thin solid black;
}
div.rem1 {
width:4rem;
height: 4rem;
clear: both;
}
div.rem2 {
width: 3rem;
height: 3rem;
}
div.em1 {
width: 4em;
height: 4em;
clear: both;
}
div.em2 {
width: 3em;
height: 3em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
<input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size
<input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>मूल रूप से em सीएसएस में निकटतम माता-पिता के सापेक्ष है, जबकि है रेम है पृष्ठ के माता-पिता के सापेक्ष है जो आमतौर पर html टैग है ...
यदि आप नीचे सीएसएस चलाते हैं और माता-पिता इसे कैसे प्रभावित कर रहे हैं, तो आप स्पष्ट रूप से अंतर देखते हैं:
html {
font-size: 16px;
}
.lg-font {
font-size: 30px;
}
p.rem {
font-size: 1rem;
}
p.em {
font-size: 1em;
}<div class="lg-font">
<p class="em">Hello World - em</p>
</div>
<div class="lg-font">
<p class="rem">Hello World - rem</p>
</div>rem: एक CSSइकाई जो htmlतत्व के फ़ॉन्ट आकार के सापेक्ष है ।em: एक CSSइकाई जो मूल तत्व के फ़ॉन्ट आकार के सापेक्ष है ।उदाहरण:
.element {
width: 10rem;
height: 10rem;
background-color: green;
font-size: 5px;
}
.innerElement {
width: 10em;
height: 10em;
background-color: blue;
}<div class="element">
<div class="innerElement"></div>
</div>उपरोक्त उदाहरण में हरे रंग का वर्ग 160 पीएक्स 160 पीएक्स है (जब तक कि आपके पास ब्राउज़र डिफ़ॉल्ट नहीं है 16px)। ऐसा इसलिए है क्योंकि htmlतत्व font-sizeका ब्राउज़र डिफ़ॉल्ट है 16pxऔर 10rem* 16px= 160।
अंदर का चौक 10emबड़ा है। क्योंकि इसका मूल तत्व 5pxवर्ग 5em * 10px = है 50px।
remनिम्नलिखित लाभ के लिए सभी इकाइयों की स्थापना करके :
rem तदनुसार स्केल हो जाएंगे।16pxहमारे ब्राउज़र के डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट-आकार का उपयोग नहीं कर रहे हैं, तो उपयोगकर्ता के चयनित फ़ॉन्ट आकार के साथ पैमाना होगा।रेम, एमएम और पीएक्स सीएसएस में फ़ॉन्ट-आकार की विभिन्न इकाइयाँ हैं।
em एक एम उस तत्व के माता-पिता के गणना किए गए फ़ॉन्ट-आकार के बराबर है। पूर्व: div तत्व को फॉन्ट-साइज़ से परिभाषित किया गया है: १६ पीएक्स, उसके बच्चे १em = १६ पीएक्स।
रेम रिम मान रूट HTML तत्व के सापेक्ष हैं। पूर्व: यदि मूल तत्व का फ़ॉन्ट-आकार 16px है, तो सभी तत्वों के लिए 1 रेम = 16px।
संदर्भ: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97
https://stackoverflow.com/a/13941345/9093112 - यह एक सबसे अच्छा उत्तर है, लेकिन मैं केवल जोड़ना चाहता हूं
Default browser size is 16px = 1em = 1 rem
em और rem फॉन्ट-आधारित रिश्तेदार इकाइयाँ हैं और यह फोंट या लंबाई के लिए ems का उपयोग करने के लिए अलग है, इसलिए ems और rems फॉन्ट-आधारित दोनों हैं, लेकिन उनके बीच का अंतर यह है कि ems माता - पिता या वर्तमान का उपयोग करते हैं तत्व का रिम्स के संदर्भ के रूप में करते हैं संदर्भ के रूप में रूट फ़ॉन्ट आकार का उपयोग करें।
अगर हम फ़ॉन्ट-आकारों के लिए ईम का उपयोग करना चाहते हैं, तो संदर्भ बस माता-पिता द्वारा फ़ॉन्ट-आकार की गणना की जाती है जो प्रतिशत के साथ होता है।
बेलो उदाहरण में, हेडर चाइल्ड एलिमेंट पर एक तीन एम फॉन्ट-साइज़ 72 पिक्सल्स में सिर्फ़ इसलिए निकलता है क्योंकि वह तीन गुना पेरेंट फॉन्ट साइज़ है जो (150/100) * 16 = जीपीएक्स है। अब लंबाई के लिए, यह थोड़ा अलग है। हेडर पर 2em पैडिंग, क्योंकि यह एक लंबाई माप है, वर्तमान तत्व के फ़ॉन्ट आकार को संदर्भ के रूप में उपयोग करता है और हम पहले से ही जानते हैं कि यह 24 पिक्सेल है, इसलिए 2em 48-पिक्सेल पैडिंग में परिणाम देगा, इसे मिला? यह एक सूक्ष्म अंतर है, लेकिन एक महत्वपूर्ण है। जब आप उन्हें उपयोग करते हैं यदि यह फोंट के लिए है तो संदर्भ माता-पिता और लंबाई के लिए है, संदर्भ वर्तमान तत्व है।
html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}
रेम के बारे में, यह वास्तव में फ़ॉन्ट आकार और लंबाई दोनों के लिए एक ही तरह से काम करता है क्योंकि यह हमेशा रूट फ़ॉन्ट आकार को संदर्भ के रूप में उपयोग करता है। इसका मतलब है कि हमारे यहां जो 10 रेम पैडिंग हैं, उनका परिणाम 160 पिक्सल होगा क्योंकि रूट फ़ॉन्ट का आकार 16 है।
में उन्हें रिश्तेदार इकाई फ़ॉन्ट आकार के आधार पर मापा जाता है निकटतम माता पिता फ़ॉन्ट आकार , लेकिन के अनुसार यदि फ़ॉन्ट आकार माता पिता डिफ़ॉल्ट फ़ॉन्ट आकार से तो कोई भी तत्व के लिए निर्धारित नहीं है परिभाषित किया जाएगा जड़ HTML तत्व
रेम रिश्तेदार इकाई केवल करके की जाती है जड़ HTML तत्व है, इस प्रकार, माता पिता के तत्व का फ़ॉन्ट आकार यह प्रभावित नहीं करता है
CSS मापन इकाइयाँ: em , rem दोनों उनके माता-पिता के सामने के आकार के सापेक्ष । इसके Parents फ़ॉन्ट आकार के आधार पर आकार बदल जाएगा। उदाहरण:
रेम : रूट तत्व फ़ॉन्ट आकार का 100%।
em : 100% पैरेंट फ़ॉन्ट आकार।