CSS-এ রিলেটিভ লেথ ইউনিট ব্যবহার করা হয় অন্য একটি লেথ প্রোপার্টির সাপেক্ষে লেথ নির্দিষ্ট করার জন্য।
| Sr.No | Unit & Description |
|---|---|
| 1 | em এলিমেন্টের ফন্ট-সাইজের সাপেক্ষে অর্থাৎ 4em মানে বর্তমান ফন্টের আকারের ৪ গুণ। |
| 2 | ex বর্তমান ফন্টের x-height-এর সাপেক্ষে। |
| 3 | ch ০ (শূন্য) ক্যারেক্টারের প্রস্থের সাপেক্ষে। |
| 4 | rem রুট এলিমেন্টের ফন্ট-সাইজের সাপেক্ষে। |
| 5 | vw ভিউপোর্টের প্রস্থের ১% এর সাপেক্ষে। |
| 6 | vh ভিউপোর্টের উচ্চতার ১% এর সাপেক্ষে। |
| 7 | vmin ভিউপোর্টের ছোট ডাইমেনশনের ১% এর সাপেক্ষে। |
| 8 | vmax ভিউপোর্টের বড় ডাইমেনশনের ১% এর সাপেক্ষে। |
| 9 | % প্যারেন্ট এলিমেন্টের সাপেক্ষে। |
উদাহরণ
রিলেটিভ লেথ ইউনিট ব্যবহার করে একটি উদাহরণ দেখি:
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
আউটপুট
উদাহরণ
এখন আরেকটি উদাহরণ দেখি:
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 4ch;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
আউটপুট
