Đơn vị độ dài tương đối trong CSS được sử dụng để chỉ định độ dài liên quan đến một thuộc tính độ dài khác.
| Sr.No | Đơn vị &Mô tả |
|---|---|
| 1 | em Liên quan đến kích thước phông chữ của phần tử, tức là 4em có nghĩa là gấp 4 lần kích thước phông chữ hiện tại. |
| 2 | ví dụ Liên quan đến chiều cao x của phông chữ hiện tại |
| 3 | ch Tương đối với chiều rộng của 0 |
| 4 | rem Liên quan đến kích thước phông chữ của phần tử gốc |
| 5 | vw Tương đối với 1% chiều rộng của khung nhìn * |
| 6 | vh Tương đối với 1% chiều cao của khung nhìn * |
| 7 | vmin Tương đối với 1% kích thước nhỏ hơn của khung nhìn * |
| 8 | vmax Tương đối với 1% kích thước lớn hơn của khung nhìn * |
| 9 | % Liên quan đến phần tử mẹ |
Ví dụ
Hãy để chúng tôi xem một ví dụ sử dụng Đơn vị Độ dài Tương đối -
<!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> Đầu ra
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ khác -
<!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> Đầu ra
