CSS পরম এবং আপেক্ষিক ইউনিট

CSS পরম ইউনিট এবং আপেক্ষিক ইউনিট উভয়ই দূরত্ব ইউনিটের অধীনে পড়ে।

CSS আপেক্ষিক ইউনিট অন্য উপাদানের রেফারেন্সে একটি উপাদানের দৈর্ঘ্য নির্ধারণ করে।

উদাহরণস্বরূপ, vh আপেক্ষিক ইউনিট ভিউপোর্ট উচ্চতার সাথে আপেক্ষিক।

নিচের CSS আপেক্ষিক ইউনিটগুলি −

Sr. No	একক এবং এর সাথে সম্পর্কিত
1	% অভিভাবক উপাদান মাত্রা
2	em উপাদানের হরফের আকার
3	ex এলিমেন্টের ফন্টের x-উচ্চতা
4	lh উপাদানের লাইনের উচ্চতা
5	rem রুট এলিমেন্টের ফন্ট সাইজ
6	rlh মূল উপাদানের লাইনের উচ্চতা
7	vb রুট এলিমেন্টের ব্লক অক্ষে ভিউপোর্টের আকারের 1%
8	vh ভিউপোর্টের উচ্চতার 1%
9	vmax ভিউপোর্টের বৃহত্তর মাত্রার 1%
10	vmin ভিউপোর্টের ছোট মাত্রার 1%
11	vw ভিউপোর্টের প্রস্থের 1%

উদাহরণ

আসুন CSS আপেক্ষিক ইউনিটের একটি উদাহরণ দেখি -

<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html{
   font-size: 14px;
   line-height: normal;
}
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#textContain {
   font-size: 20px;
   line-height: 2;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>lh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
   if(textSelect.value === '')
      textPreview.textContent = 'Type some text first';
   else{
      for(var i=0; i<5; i++){
         var radInp = document.getElementsByClassName('radio')[i];
         if(radInp.checked === true){
            textPreview.textContent = textSelect.value;
            textPreview.style.fontSize = numSelect.value+radInp.value
         }
      }
   }
}
</script>
</body>
</html>

আউটপুট

উপরের কোডের আউটপুট −

নিচে দেওয়া হল

যেকোনো বোতামে ক্লিক করার আগে −

CSS পরম এবং আপেক্ষিক ইউনিট

'em' বিকল্পের সাথে 'প্রিভিউ' বোতামে ক্লিক করার পরে নির্বাচিত এবং খালি পাঠ্য ক্ষেত্র -

CSS পরম এবং আপেক্ষিক ইউনিট

'rem' বিকল্পের সাথে 'প্রিভিউ' বোতামে ক্লিক করার পরে নির্বাচিত এবং অ-খালি পাঠ্য ক্ষেত্র -

CSS পরম এবং আপেক্ষিক ইউনিট

'em' বিকল্পের সাথে 'প্রিভিউ' বোতামে ক্লিক করার পরে নির্বাচিত এবং অ-খালি পাঠ্য ক্ষেত্র -

CSS পরম এবং আপেক্ষিক ইউনিট

CSS পরম একক −

নিচে দেওয়া হল

Sr. No	ইউনিট ও নাম
1	cm সেন্টিমিটার (1 সেমি =100 মিমি)
2	ইন৷ ইঞ্চি (1 ইঞ্চি =2.54 সেমি)
3	mm মিলিমিটার
4	pc পিকাস (1 পিসি =12 পিটি)
5	pt৷ পয়েন্ট (1 pt =1/72 ইঞ্চি)
6	px পিক্সেল (1 px =0.75 pt)

উদাহরণ

আসুন CSS পরম একক -

-এর উদাহরণ দেখি

<!DOCTYPE html>
<html>
<head>
<title>CSS Absolute Units</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="10" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="pc"><label>pc</label>
<input class="radio" type="radio" name="heading" value="pt"><label>pt</label>
<input class="radio" type="radio" name="heading" value="px" checked><label>px</label>
<input class="radio" type="radio" name="heading" value="in"><label>in</label>
<input class="radio" type="radio" name="heading" value="cm"><label>cm</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
   if(textSelect.value === '')
      textPreview.textContent = 'Type some text first';
   else{
      for(var i=0; i<5; i++){
         var radInp = document.getElementsByClassName('radio')[i];
         if(radInp.checked === true){
            textPreview.textContent = textSelect.value;
            textPreview.style.fontSize = numSelect.value+radInp.value
         }
      }
   }
}
</script>
</body>
</html>

আউটপুট

উপরের কোডের আউটপুট −

নিচে দেওয়া হল

যেকোনো বোতামে ক্লিক করার আগে −

CSS পরম এবং আপেক্ষিক ইউনিট

'px' বিকল্প সহ 'প্রিভিউ' বোতামে ক্লিক করার পরে নির্বাচিত এবং অ-খালি পাঠ্য ক্ষেত্র -

CSS পরম এবং আপেক্ষিক ইউনিট

'pt' বিকল্প সহ 'প্রিভিউ' বোতামে ক্লিক করার পরে নির্বাচিত এবং অ-খালি পাঠ্য ক্ষেত্র -

CSS পরম এবং আপেক্ষিক ইউনিট

'পিসি' বিকল্প সহ 'প্রিভিউ' বোতামে ক্লিক করার পরে নির্বাচিত এবং অ-খালি পাঠ্য ক্ষেত্র -

CSS পরম এবং আপেক্ষিক ইউনিট