ওয়েবসাইট উত্সে, আমি কখনও কখনও ডেভেলপারদের remইউনিটটি ব্যবহার করতে দেখেছি । এর সাথে কি মিল আছে em? আমি এটি চেষ্টা করে দেখেছি এটি আসলে কী করে তবে এটি কী সম্পর্কিত?
এইচটিএমএল
<div>Hello <p>World</p></div>
সিএসএস
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
উত্তর:
EMগুলি তাদের পিতামাতার ফন্ট আকারের সাথে সম্পর্কিত
REMগুলি একটি বেস ফন্টের আকারের সাথে সম্পর্কিত
মধ্যবর্তী পাত্রে ফন্টের আকার পরিবর্তন করার সময় এটি গুরুত্বপূর্ণ। ইএম সহ শিশু উপাদানগুলি প্রভাবিত হবে, যারা আরইএম ব্যবহার করছে তারা তা করবে না।
emইউনিট উপাদান তারা ব্যবহার করছি এর (পিতা বা মাতা উপাদান নয়) ফন্টের আকার, আপেক্ষিক হয় ] [W3C এর সংজ্ঞা ] [Codepen ডেমো ]
যদিও ইম প্রত্যক্ষ বা নিকটতম পিতামাতার ফন্ট-আকারের সাথে সম্পর্কিত, রিম কেবল এইচটিএমএল (মূল) ফন্টের আকারের সাথে সম্পর্কিত।
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>মূলত এম সিএসএসের নিকটতম পিতামাতার সাথে সম্পর্কিত, যখন রেম পৃষ্ঠার পিতামাতার সাথে সম্পর্কিত যা সাধারণত এইচটিএমএল ট্যাগ হয় ...
আপনি নীচের সিএসএসটি পরিচালনা করেন এবং পিতামাতার কীভাবে এটি প্রভাবিত করছে তা আপনি স্পষ্টভাবে দেখতে পাচ্ছেন:
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 px দ্বারা 160 পিক্স (যদি আপনার ব্রাউজারের ডিফল্ট না থাকে 16px)। এই কারণে ব্রাউজার ডিফল্ট htmlউপাদান font-sizeহল 16pxএবং 10rem*16px = 160।
ভিতরে স্কোয়ারটি 10emবড়। কারণ এর মূল উপাদানটি 5pxবর্গক্ষেত্র 5 মিমি 10px = = 50px।
সমস্ত ইউনিটকে remনিম্নলিখিত সুবিধাগুলি স্থাপন করে:
rem অনুসারে স্কেল করবে।16pxআমাদের অ্যাপ্লিকেশনটির ডিফল্ট ব্রাউজারের ফন্ট-আকার ব্যবহার না করে থাকে তখন ব্যবহারকারীর নির্বাচিত ফন্টের আকারটি মাপবে।রিম, ইম এবং পিক্স হ'ল CSS এর ফন্ট-আকারের বিভিন্ন ইউনিট।
em একটি এম সেই উপাদানটির পিতামাতার গণিত ফন্ট-আকারের সমান। উদাহরণস্বরূপ: ডিভ উপাদান ফন্ট-আকারের সাথে সংজ্ঞায়িত করা হয়েছে: 16px, এর শিশুরা 1 ম = 16px।
রিম রিম মানগুলি মূল এইচটিএমএল উপাদানটির সাথে সম্পর্কিত। উদাহরণস্বরূপ: মূল উপাদানটির ফন্ট-আকার যদি 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
ইম এবং রিম হরফ-ভিত্তিক আপেক্ষিক ইউনিট এবং ফন্টের জন্য বা দৈর্ঘ্যের জন্য ইএমএস ব্যবহার করা পৃথক, সুতরাং ইএমএস এবং রিমস উভয়ই হরফ-ভিত্তিক তবে তাদের মধ্যে পার্থক্য হ'ল ইএমএস পিতামাতার বা বর্তমান ব্যবহার করে উপাদানটিকে রেফারেন্স হিসাবে রেফারেন্স হিসাবে মূল ফন্ট আকার ব্যবহার করুন।
আমরা যদি হরফ আকারের জন্য ইএমএস ব্যবহার করতে চাই তবে উল্লেখটি হ'ল পিতামাতারা শতাংশের সাথে ঘটে যাওয়া ফন্ট-আকারের অনুরূপ গণনা করেন।
নমুনা উদাহরণস্বরূপ, শিরোনামের চাইল্ড এলিমেন্টে একটি তিনটি এম ফন্ট-আকারের ফলস্বরূপ 72 পিক্সেল হয় কারণ এটি প্যারেন্ট ফন্টের আকারের তিনগুণ (150/100) * 16 = 24px। দৈর্ঘ্যের জন্য এখন এটি কিছুটা আলাদা। হেডারে 2 এম প্যাডিং, যেহেতু এটি একটি দৈর্ঘ্য পরিমাপ, বর্তমান উপাদানটির ফন্টের আকারটিকে একটি রেফারেন্স হিসাবে ব্যবহার করে এবং আমরা ইতিমধ্যে জানি যে এটি 24 পিক্সেল, সুতরাং 2 এম এর ফলে 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 উপাদান
REM আপেক্ষিক ইউনিট শুধুমাত্র দ্বারা গণনা করা হয় মূল HTML উপাদান , এইভাবে, পিতা বা মাতা উপাদান ফন্টের আকার এটা কোনো প্রভাব পড়ে না
সিএসএস পরিমাপ ইউনিট: ই.এম. , REM তাদের বাবা সামনে আকার উভয় আপেক্ষিক। আকারটি তার পিতামাতার ফন্টের আকারের উপর নির্ভর করে পরিবর্তিত হবে। উদাহরণ:
রিম : রুট এলিমেন্ট ফন্টের আকারের 100%।
ইম : প্যারেন্ট ফন্টের আকারের 100%।