Nên dùng px hay rem trong CSS? | Lý do lấy 16px làm chuẩn và cách phân chia
CSS Frontend Accessibility Người mới bắt đầu
Kết luận
“Dùng rem cho cỡ chữ (font-size)”, “Dùng px cho đường viền (border) hoặc các khoảng trắng cực nhỏ” là cách phân chia hiện đại. Khi người dùng tăng kích cỡ chữ trong cài đặt trình duyệt, các phần dùng rem sẽ thay đổi tương ứng một cách chính xác.
Tại sao 16px lại là tiêu chuẩn?
Vì cỡ chữ mặc định của hầu hết các trình duyệt hiện đại là 16px.
1rem = 16px(ở trạng thái mặc định)
So sánh px và rem
| Đơn vị | Ưu điểm ・ Nhược điểm |
|---|---|
| px (Đơn vị tuyệt đối) | Trực quan và không bị lệch, nhưng nó bỏ qua cài đặt phóng to chữ của người dùng. |
| rem (Đơn vị tương đối) | Tốt cho khả năng truy cập. Có thể co giãn toàn bộ trang chỉ bằng cách thay đổi giá trị gốc (html). |
🔄 この場でpxとremを変換する
px
rem
Thủ thuật “62.5%” tiện lợi
Với tiêu chuẩn 16px, việc chỉ định 24px yêu cầu bạn phải tính toán thành 1.5rem, điều này khá phiền phức. Vì vậy, có một kỹ thuật thiết lập như sau:
html {
font-size: 62.5%; /* 16px * 0.625 = 10px */
}
body {
font-size: 1.6rem; /* 16px */
}
.title {
font-size: 2.4rem; /* 24px. Việc tính toán trở nên cực kỳ dễ dàng */
}Tuy nhiên, hiện nay các công cụ như Tailwind CSS đã phổ biến, giúp việc quản lý rem trở nên dễ dàng mà không cần dùng đến thủ thuật này. Hãy lựa chọn tùy theo quy tắc của dự án bạn đang tham gia.