หน่วยความยาวสัมพัทธ์ใน CSS ใช้เพื่อระบุความยาวที่สัมพันธ์กับคุณสมบัติความยาวอื่น
| Sr.No | หน่วย &คำอธิบาย |
|---|---|
| 1 | em สัมพันธ์กับขนาดแบบอักษรขององค์ประกอบ เช่น 4em หมายถึงขนาดแบบอักษรปัจจุบัน 4 เท่า |
| 2 | อดีต เทียบกับความสูง x ของแบบอักษรปัจจุบัน |
| 3 | ช เทียบกับความกว้างของ 0 |
| 4 | เรม สัมพันธ์กับขนาดตัวอักษรขององค์ประกอบรูท |
| 5 | vw สัมพันธ์กับ 1% ของความกว้างของวิวพอร์ต* |
| 6 | vh เทียบกับ 1% ของความสูงของวิวพอร์ต* |
| 7 | vmin เทียบกับ 1% ของวิวพอร์ต* ขนาดเล็กลง |
| 8 | vmax เทียบกับ 1% ของวิวพอร์ต* ขนาดที่ใหญ่ขึ้น |
| 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> ผลลัพธ์
