Khi xây dựng giao diện web, việc hiểu rõ đơn vị trong CSS là yếu tố cực kỳ quan trọng. Các đơn vị này giúp bạn xác định kích thước, khoảng cách, tỷ lệ font và cách các phần tử hiển thị trên nhiều thiết bị khác nhau.
Đơn vị trong CSS
Trong CSS, có hai nhóm đơn vị chính:
- Đơn vị tuyệt đối: Luôn cố định, không thay đổi theo ngữ cảnh (ví dụ:
px). - Đơn vị tương đối: Phụ thuộc vào phần tử cha hoặc kích thước khung nhìn (ví dụ:
%,em,rem,vw,vh).
Tìm hiểu đơn vị px (Pixel)
px là viết tắt của pixel, đơn vị tuyệt đối phổ biến nhất trong CSS. Khi bạn dùng px, phần tử sẽ có kích thước cố định, không phụ thuộc vào phần tử khác hoặc tỷ lệ zoom.
<div class="box"></div>
<style>
.box {
width: 200px;
height: 100px;
background-color: orange;
}
</style>
Hộp .box luôn có kích thước 200×100px, dù bạn xem trên màn hình to hay nhỏ.
Nhược điểm:
- Không tự co giãn trên các thiết bị khác nhau.
- Không phản ứng khi người dùng tăng giảm cỡ chữ trong trình duyệt.
Khi nên dùng:
padding,margin,border, hoặc khi cần kích thước cố định (ví dụ: icon, khung ảnh nhỏ).
Đơn vị % (Phần trăm)
% là đơn vị tương đối, phụ thuộc vào kích thước của phần tử cha.
<main>
<div id="child"></div>
</main>
<style>
main {
width: 200px;
border: 1px solid black;
}
#child {
width: 50%;
background-color: orange;
height: 20px;
}
</style>
#child có chiều rộng bằng 50% của phần tử cha (200px), tức là 100px.
Nếu bạn thay đổi width của <main>, #child sẽ tự động thay đổi theo.
Khi nên dùng: chia layout, canh kích thước phần tử con theo tỉ lệ phần tử cha.
Đơn vị vw, vh (Viewport)
vw= 1% chiều rộng của khung nhìn (viewport width)vh= 1% chiều cao của khung nhìn (viewport height)
<div class="half-screen"></div>
<style>
body {
margin: 0;
}
.half-screen {
width: 50vw;
height: 50vh;
background-color: skyblue;
}
</style>
Khối .half-screen chiếm 50% chiều rộng và 50% chiều cao màn hình - dù bạn phóng to hay thu nhỏ cửa sổ, kích thước vẫn luôn giữ đúng tỷ lệ.
Khi nên dùng: tạo layout toàn màn hình, banner, hoặc phần mở đầu trang web (hero section).
Đơn vị em
em là đơn vị tương đối dựa trên font-size của chính phần tử đó hoặc phần tử cha (nếu không có font-size riêng).
<div class="parent">
<div class="child">Hello CSS</div>
</div>
<style>
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* = 1.5 * 20px = 30px */
padding: 2em; /* = 2 * 30px = 60px */
background-color: tomato;
color: white;
}
</style>
Ở ví dụ trên, 1em tương đương 20px trong phần tử cha, nhưng trong .child, do font-size tăng lên 1.5em (tức 30px), các giá trị khác (padding, margin...) tính theo em cũng nhân theo.
Khi nên dùng: khi muốn các phần tử tỷ lệ theo font-size, chẳng hạn khoảng cách nội dung so với chữ.
Đơn vị rem
rem (root em) là đơn vị tương đối phụ thuộc vào font-size của phần tử gốc <html>, chứ không bị ảnh hưởng bởi phần tử cha.
<style>
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 2 * 16 = 32px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}
</style>
<h1>Tiêu đề</h1>
<p>Đây là đoạn mô tả sử dụng đơn vị rem.</p>
Nếu bạn thay font-size của <html> sang 18px, toàn bộ các phần tử dùng rem sẽ tăng tỷ lệ theo - giúp kiểm soát giao diện dễ dàng hơn.
Khi nên dùng: định nghĩa kích thước toàn cục (font, margin, padding), tạo hệ thống tỉ lệ nhất quán cho toàn trang.
Nên dùng đơn vị nào?
- Kích thước cố định (icon, border, thumbnail):
px(Chính xác và dễ kiểm soát) - Chia bố cục theo phần tử cha:
%(Linh hoạt theo container) - Toàn màn hình (banner, hero section):
vw,vh(Phản ứng theo viewport) - Font và phần tử theo cỡ chữ cha:
em(Co giãn theo nội dung) - Kiểm soát kích thước toàn cục:
rem(Dễ bảo trì, đồng nhất toàn trang)
Kết luận
- Dùng
pxkhi cần chính xác tuyệt đối. - Dùng
%,em,remkhi muốn giao diện co giãn theo ngữ cảnh. - Dùng
vw,vhđể tạo bố cục toàn màn hình.
Khi nắm vững cách hoạt động của từng đơn vị, bạn sẽ dễ dàng làm chủ giao diện và nâng cao trải nghiệm người dùng trên mọi nền tảng.