Tổng quan về đơn vị đo lường
Trong quá trình xây dựng giao diện web, việc lựa chọn đơn vị đo lường phù hợp ảnh hưởng trực tiếp đến khả năng响应 ứng (responsive) và tính nhất quán của thiết kế. CSS cung cấp nhiều loại đơn vị khác nhau, mỗi loại có cơ chế tính toán và mục đích sử dụng riêng biệt.
Đơn vị Pixel (px)
px là viết tắt của pixel, được xem là đơn vị cơ bản nhất trong thiết kế web. Đây là đơn vị có độ dài cố định tương đối, phụ thuộc vào mật độ điểm ảnh của màn hình hiển thị. Khi sử dụng px, kích thước sẽ không thay đổi theo cài đặt font chữ của người dùng trên trình duyệt.
Đơn vị Em (em)
Em là đơn vị đo lường tương đối. Giá trị của nó được tính toán dựa trên kích thước font chữ của chính phần tử đó. Nếu không được định nghĩa cụ thể, nó sẽ thừa kế giá trị từ phần tử cha (parent element).
- Giá trị của em không cố định mà thay đổi theo ngữ cảnh.
- Có tính chất thừa kế kích thước font từ cấp cha.
Lưu ý: Khi các phần tử lồng nhau nhiều cấp, việc sử dụng em có thể dẫn đến hiệu ứng compounded (tích lũy), khiến kích thước thực tế lớn hơn dự kiến.
Đơn vị Rem (root em)
Rem là đơn vị mới được introducer trong CSS3. Khác với em, rem luôn tính toán dựa trên kích thước font chữ của phần tử gốc (thẻ html).
Nếu không có cấu hình nào khác, trình duyệt thường mặc định kích thước gốc là 16px. Để thuận tiện cho việc tính toán nhẩm, nhiều developer thường thiết lập lại kích thước gốc về 10px.
/* Thiết lập lại giá trị gốc để dễ quy đổi */
:root {
font-size: 10px; /* Tương đương 62.5% của 16px mặc định */
}
/* Khi đó 1rem = 10px */
.container {
font-size: 1.4rem; /* Kết quả thực tế là 14px */
padding: 2rem; /* Kết quả thực tế là 20px */
}Ưu điểm: Chỉ cần điều chỉnh giá trị tại thẻ gốc, toàn bộ các thành phần sử dụng rem trên trang sẽ thay đổi theo tỷ lệ.
Tương thích: Hỗ trợ trên hầu hết các trình duyệt hiện đại, ngoại trừ các phiên bản IE8 trở về trước.
So sánh chiến lược sử dụng Em và Rem
Sự khác biệt cốt lõi nằm ở điểm tham chiếu: rem dựa vào gốc (html), còn em dựa vào cha gần nhất.
- Sử dụng em khi muốn kích thước thành phần phụ thuộc vào kích thước font của chính nó (ví dụ: icon đi kèm text, padding dựa trên font-size).
- Sử dụng rem cho hầu hết các trường hợp còn lại như kích thước khung, khoảng cách layout để đảm bảo tính đồng bộ.
Đơn vị Viewport (vw, vh, vmin, vmax)
Nhóm đơn vị này đo lường dựa trên kích thước vùng nhìn thấy (viewport) của trình duyệt.
- vw (Viewport Width): 1vw bằng 1% chiều rộng cửa sổ trình duyệt. Ví dụ: nếu chiều rộng là 1000px, thì 1vw = 10px.
- vh (Viewport Height): 1vh bằng 1% chiều cao cửa sổ trình duyệt. Ví dụ: nếu chiều cao là 800px, thì 1vh = 8px.
- vmin và vmax: Dựa trên giá trị nhỏ nhất hoặc lớn nhất giữa chiều rộng và chiều cao viewport.
/* Ví dụ ứng dụng viewport units */
.hero-section {
width: 100vw;
height: 50vh; /* Chiếm nửa chiều cao màn hình */
}
.responsive-box {
width: 50vmin; /* 50% của cạnh ngắn hơn giữa rộng và cao */
}Đơn vị Phần trăm (%)
Đơn vị % tính toán dựa trên kích thước của phần tử chứa nó (parent), tuy nhiên ngữ cảnh cụ thể sẽ thay đổi tùy thuộc vào thuộc tính CSS:
- Với các phần tử tĩnh (static): Tính dựa trên chiều rộng/cao của cha.
- Với
position: absolute: Tính dựa trên khung chứa đã được định vị (positioned ancestor). - Với
position: fixed: Tính dựa trên kích thước viewport.
Các vấn đề kỹ thuật thường gặp
1. Lưu ý khi dùng em cho font-size:
Cần kiểm tra kỹ chuỗi thừa kế. Nếu một phần tử cha có font-size là 20px, thì 1.5em ở con sẽ là 30px. Nếu cha là 30px, con sẽ là 45px. Sự thay đổi này gây khó khăn cho việc bảo trì trong cấu trúc lồng nhau phức tạp.
2. Các đơn vị pc, pt, ch:
Những đơn vị này thường xuất hiện trong thiết kế in ấn hoặc排版 chuyên nghiệp, ít khi được sử dụng trong thiết kế giao diện web thông thường.
3. Thiết lập tỷ lệ 1rem = 10px:
Áp dụng quy tắc html { font-size: 62.5%; } hoặc 10px trực tiếp để đơn giản hóa quá trình quy đổi từ thiết kế sang code.
4. Vấn đề chiều cao百分比:
Nếu phần tử cha không được xác định chiều cao cụ thể, việc设置 chiều cao percentage cho phần tử con sẽ không có hiệu lực. Khi đó, chiều cao sẽ tự động co giãn theo nội dung thực tế.