Các đơn vị CSS xác định kích thước phần tử. Đơn vị tuyệt đối (ví dụ: px, cm) có giá trị cố định.
Đơn vị tương đối (ví dụ: em, rem, %, vh) phụ thuộc vào các yếu tố như viewport hoặc phần tử cha.
Có hai loại đơn vị: Tuyệt đối và Tương đối.
Absolute units
Các đơn vị tuyệt đối trong CSS như px, cm và mm có giá trị cố định. Chúng không thay đổi dựa trên viewport hoặc phần tử cha.
Chúng được dùng khi cần đo lường chính xác, không đổi cho các phần tử.
. cm
Một centimeter (cm) là một đơn vị đo chiều dài trong hệ SI. Nó bắt nguồn từ mét (m), với 1 m = 100 cm.
Hệ SI được duy trì bởi BIPM (Cục Cân đo Quốc tế).
HTML1 cm = 1 / 100 m
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
font-size: 2cm;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->
. mm
Milimet (mm) được giới thiệu trong hệ mét của Cách mạng Pháp và trở thành một phần của hệ SI. Nó được duy trì bởi Cục Cân đo Quốc tế (BIPM).
HTML1 cm=10mm
1mm=1/10 cm
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
font-size: 2mm;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->
. inch(in)
Inch bắt nguồn từ các phép đo cổ xưa của con người dựa trên chiều rộng của ngón tay cái. Nó dựa trên chiều dài của hạt lúa mạch khô.
Năm 1959, nó được tiêu chuẩn hóa bằng một thỏa thuận quốc tế là chính xác 25.4 milimet. Mục đích là để phù hợp với metric system.
HTML1 inch = 2.54cm =2.54 * 1cm=2.54* 10mm= 25.4mm
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
font-size: 1in;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->
. pixel (px)
Pixel (px) là đơn vị nhỏ nhất trên màn hình kỹ thuật số, đại diện cho một điểm sáng. Nhiều pixel hơn có nghĩa là độ rõ nét của hình ảnh tốt hơn.
Nhiều pixel hơn cũng đồng nghĩa với độ phân giải màn hình cao hơn.
HTML1px = 0.26mm
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
font-size: 23px;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Hello GFG How are you?</p>
</body>
</html>
<!--Driver Code Ends-->
. pt (point)
Point (pt) là một đơn vị kiểu chữ bằng 1/72 inch. Nó được dùng cho kích thước phông chữ và khoảng cách trong thiết kế.
HTML1pt = 1/72 inch(1 inch=2.54cm)
1pt= 1.33px
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
font-size: 100pt;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Hello Geeks</p>
</body>
</html>
<!--Driver Code Ends-->
. 1 pc(pica)
Pica là một đơn vị được sử dụng trong in ấn và thiết kế, bằng 12 points hoặc 1/6 inch (4.233 mm). Nó giúp xác định kích thước bố cục như kích thước phông chữ, kích thước hình ảnh.
HTML1pc=12pt=15.96px
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
font-size:12pc;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Hello Geeks</p>
</body>
</html>
<!--Driver Code Ends-->
Relative Units
. em
Trong CSS, đơn vị "em" đề cập đến font-size của phần tử cha. Nếu không có phần tử cha, nó mặc định là phần tử gốc (<html>).
Điều này xảy ra nếu nó là phần tử duy nhất trong DOM.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.ok {
font-size: 20px;
}
.para {
font-size: 2em;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="ok">
Hello GFG
<div class="para"> Hello GFG</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
- Div có font-size là 20px. Thẻ p có font-size được đặt thành 2em. 1em bằng font-size của div.
- Do đó, font-size của thẻ p là 40px (2 * 20px). Giá trị này dựa trên font-size của phần tử cha.
. rem
Trong CSS, rem dựa trên font-size của phần tử gốc (<html>) và luôn giữ nguyên trong mọi trường hợp.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
html {
font-size: 25px;
}
.para {
font-size: 2rem;
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="para"> Hello GFG</div>
</body>
</html>
<!--Driver Code Ends-->
Trong trường hợp này, div được đặt thành 2rem và font-size gốc là 25px. Font-size của div sẽ là 50px (2 * 25px).
. vw or view-width
Trong CSS, vw phụ thuộc vào viewport width. Nó thay đổi theo kích thước màn hình.
Điện thoại Android có vw nhỏ hơn TV HD.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.para {
height: 10vw;
width: 50vw;
border: 2px solid black;
background-color: chocolate;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="para"> Hello GFG</div>
</body>
</html>
<!--Driver Code Ends-->
Trong code này, chiều cao của div là 50% viewport width. Chiều cao là 10% viewport height.
. vh or view-height
Đơn vị vh trong CSS là 1% chiều cao viewport. Nó rất hữu ích cho responsive design để thay đổi kích thước phần tử với kích thước cửa sổ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.full-height {
height: 100vh;
background-color: lightblue;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="full-height">
<h1>This div is 100% of the viewport height (100vh)</h1>
</div>
</body>
</html>
<!--Driver Code Ends-->
Code này tạo một div chiếm 100% chiều cao viewport (100vh). Nó căn giữa văn bản bên trong div theo cả chiều dọc và chiều ngang bằng Flexbox.
Màu nền là xanh nhạt.
. percentage(%)
Đơn vị % trong CSS tương đối so với kích thước của phần tử cha. Điều này cho phép các phần tử tự động điều chỉnh để có responsive design.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.container {
width: 300px;
height: 200px;
background-color: lightgreen;
}
.child {
width: 50%;
height: 50%;
background-color: lightcoral;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Code này tạo một div container có kích thước 300px x 200px và một div con bên trong nó. Div con được đặt thành 50% chiều rộng và chiều cao của container.
Nó có màu nền light coral.
. vmin
Đơn vị vmin trong CSS dựa trên chiều rộng hoặc chiều cao nhỏ hơn của viewport. Nó giúp các phần tử tỷ lệ tương ứng cho responsive design.
HTML<!--Driver Code Starts-->
<html>
<head>
</head>
<!--Driver Code Ends-->
<style>
div {
height: 20vmin;
width: 20vmin;
background-color: blueviolet;
}
</style>
<!--Driver Code Starts-->
<body>
<div></div>
<script>
const vw = window.innerWidth;
const vh = window.innerHeight;
console.log(`Viewport width: ${vw / 100}px, Viewport height: ${vh / 100}px`);
</script>
</body>
</html>
<!--Driver Code Ends-->
Code này tạo một div có kích thước bằng 20% kích thước viewport nhỏ hơn (vmin). Nó có màu nền blueviolet.
JavaScript ghi lại chiều rộng và chiều cao viewport bằng pixel vào console.
. vmax
Vmax là một đơn vị CSS đại diện cho 1% kích thước viewport lớn hơn (chiều rộng hoặc chiều cao). Nó giúp các phần tử tỷ lệ dựa trên kích thước vượt trội của màn hình.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
height: 10vmax;
width: 10vmax;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
</div>
<script>
const vw = window.innerWidth;
const vh = window.innerHeight;
const actualvw = vw / 100;
const actualvh = vh / 100;
console.log("view-width:" + actualvw);
console.log("view-height:" + actualvh);
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- Code này tạo một div có kích thước bằng 10% kích thước viewport lớn hơn (vmax). Nó có màu nền cadet blue.
- JavaScript tính toán và ghi lại chiều rộng, chiều cao viewport bằng pixel. Nó chia innerWidth và innerHeight cho 100.
. ch
Đơn vị ch trong CSS đại diện cho chiều rộng của ký tự "0" của phông chữ hiện tại. Đó là một đơn vị tương đối.
Nó thường được dùng để định cỡ các phần tử văn bản để duy trì chiều rộng và chiều cao tỷ lệ. Nó dựa trên kích thước ký tự.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.small {
font-family: monospace;
font-size: 25px;
height: 10ch;
width: 10ch;
background-color: cornflowerblue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="small">
Hello GFG
</div>
</body>
</html>
<!--Driver Code Ends-->
Trong code này, chúng ta đã tạo một div có tên lớp là small. Chiều cao và chiều rộng của hộp nhỏ được đặt thành 10 lần chiều cao của ký tự 'x'.
Phông chữ hiện tại là phông chữ monospace.
. ex
Tương đối so với chiều cao của chữ "x" trong phông chữ hiện tại. Chủ yếu được sử dụng cho khoảng cách dọc và các phép đo liên quan đến phông chữ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.small {
font-family: monospace;
font-size: 25px;
height: 10ex;
width: 10ex;
background-color: cornflowerblue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="small">
Hello GFG
</div>
</body>
</html>
<!--Driver Code Ends-->
- Code tạo một div có class .small, hiển thị văn bản "Hello GFG" bằng phông chữ monospace với kích thước 25px.
- Chiều cao và chiều rộng của div được đặt thành 10ex. "ex" dựa trên chiều cao của chữ "x" trong font.
Màu nền là cornflower blue.
. lh
Đơn vị này là tương đối và phụ thuộc vào line-height của phần tử hiện tại.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.small {
font-family: sans-serif;
font-size: 25px;
line-height: 10;
height:2lh;
width: 2lh;
background-color: aquamarine;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="small">
Hello GFG
</div>
</body>
</html>
<!--Driver Code Ends-->
- Code tạo một div có class .small, hiển thị "Hello GFG". Nó dùng phông chữ sans-serif, kích thước 25px, line height 10.
- Chiều cao và chiều rộng của div được đặt bằng đơn vị lh dựa trên line height. Vì line height là 10, chiều cao và chiều rộng của div là 20px.
Màu nền là aquamarine.
Difference Between Absolute and Relative Units in CSS
| Aspect | Absolute Units | Relative Units |
|---|---|---|
| Responsiveness | Không responsive; kích thước vẫn cố định bất kể kích thước hoặc độ phân giải màn hình. | Tính responsive cao; tự động điều chỉnh dựa trên ngữ cảnh. |
| Dependence | Không phụ thuộc vào các phần tử cha hoặc kích thước viewport. | Phụ thuộc vào kích thước phần tử cha, gốc hoặc viewport. |
| Scalability | Khó mở rộng trên các thiết bị khác nhau. | Khả năng mở rộng tốt cho responsive design. |
| Consistency | Đảm bảo kích thước chính xác, mang lại tính đồng nhất trên các thiết bị. | Kích thước có thể thay đổi dựa trên phần tử cha hoặc viewport, cho phép linh hoạt. |
| Accessibility | Có thể cản trở khả năng truy cập bằng cách không điều chỉnh theo cài đặt trình duyệt do người dùng xác định. | Thích ứng với cài đặt người dùng như kích thước phông chữ, nâng cao khả năng truy cập. |
| Performance | Có thể hiển thị nhanh hơn vì các giá trị được cố định. | Yêu cầu tính toán dựa trên ngữ cảnh, có khả năng làm tăng thời gian hiển thị. |
When to Use Which Unit?
Usecase of Absolute Units
- Sử dụng cho các phần tử yêu cầu kích thước cố định, như đường viền, biểu tượng. Bạn cũng có thể dùng cho bố cục in, nơi các phép đo chính xác rất quan trọng.
- Thích hợp cho các tình huống mà tính responsive không phải là ưu tiên hàng đầu như các thành phần tĩnh.
Usecase of Relative Units
- Sử dụng cho các responsive design để thích ứng với nhiều thiết bị, kích thước màn hình. Đảm bảo tính linh hoạt và khả năng truy cập.
- Lý tưởng cho bố cục linh hoạt, kiểu chữ có thể mở rộng, các phần tử chịu ảnh hưởng của viewport. Ví dụ: vw, %, hoặc rem.