Bộ chuyển đổi CSS px ↔ rem
Chuyển đổi giữa các đơn vị CSS px và rem.
px (Pixel)
Một đơn vị tuyệt đối đại diện cho một pixel trên màn hình. Có kích thước cố định và bị hạn chế đối với thiết kế đáp ứng.
rem (Root EM)
Một đơn vị tương đối dựa trên cỡ chữ của phần tử gốc (html). Có lợi cho khả năng tiếp cận và thiết kế đáp ứng.
Công thức chuyển đổi
Khuyến nghị sử dụng
- • Cỡ chữ: khuyến nghị rem
- • Khoảng cách (margin, padding): khuyến nghị rem
- • Viền: có thể sử dụng px
- • Truy vấn phương tiện: khuyến nghị rem
Hướng dẫn đầy đủ về đơn vị CSS
Chọn đúng đơn vị CSS trong phát triển web ảnh hưởng lớn đến trải nghiệm người dùng và khả năng tiếp cận. Tìm hiểu sự khác biệt giữa px và rem và cách sử dụng chúng trong các tình huống phù hợp.
📐 Tính năng
- • Đơn vị tuyệt đối với sự tương ứng 1:1 với pixel màn hình
- • Kích thước nhất quán trên tất cả các trình duyệt
- • Có thể kiểm soát bố cục chính xác
- • Không bị ảnh hưởng bởi cài đặt người dùng
✅ Các trường hợp sử dụng được khuyến nghị
- • Độ dày viền (1px, 2px)
- • Độ lệch bóng
- • Kích thước biểu tượng (16px, 24px)
- • Điều chỉnh khoảng cách nhỏ
⚠️ Thận trọng
- • Bỏ qua cài đặt cỡ chữ của người dùng
- • Có thể gây ra vấn đề về khả năng tiếp cận
- • Hạn chế đối với thiết kế đáp ứng
📐 Tính năng
- • Dựa trên cỡ chữ của phần tử gốc (html)
- • Phản ánh cài đặt người dùng
- • Duy trì tỷ lệ nhất quán
- • Thân thiện với khả năng tiếp cận
✅ Các trường hợp sử dụng được khuyến nghị
- • Cài đặt cỡ chữ
- • Khoảng cách (margin, padding)
- • Kích thước vùng chứa
- • Điểm ngắt truy vấn phương tiện
💡 Ưu điểm
- • Duy trì tỷ lệ khi thay đổi kích thước
- • Cải thiện khả năng tiếp cận
- • Dễ bảo trì
🎯 Chiến lược sử dụng theo đơn vị
Kiểu chữ
Sử dụng rem cho cỡ chữ và khoảng cách dòng rem
Bố cục
Sử dụng rem cho khoảng cách và vùng chứa rem
Chi tiết
Sử dụng px cho viền và bóng px
📱 Mẹo thiết kế đáp ứng
Cách tiếp cận ưu tiên thiết bị di động
Đặt cỡ chữ cơ bản thành 16px và điều chỉnh tỷ lệ bằng đơn vị rem
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Sử dụng truy vấn phương tiện
Duy trì tính nhất quán với các điểm ngắt dựa trên rem
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Những cân nhắc về khả năng tiếp cận
✅ Các thực hành được khuyến nghị
- • Đặt cỡ chữ bằng đơn vị rem
- • Duy trì cỡ chữ tối thiểu 16px
- • Khoảng cách dòng đủ (1.5 trở lên)
- • Vùng chạm tối thiểu 44px
❌ Những điều cần tránh
- • Sử dụng giá trị px cố định cho cỡ chữ
- • Văn bản nhỏ hơn 12px
- • Chiều rộng vùng chứa cố định
- • Khoảng cách dòng 1.0 hoặc nhỏ hơn
🔧 Hỗ trợ trình duyệt và khả năng tương thích
Đơn vị px
Hỗ trợ hoàn hảo trong tất cả các trình duyệt. Có sẵn từ IE6+.
Đơn vị rem
Hỗ trợ hoàn hảo trong IE9+ và các trình duyệt hiện đại. Cần có fallback cho IE8 trở xuống.
Để hỗ trợ IE8: Khai báo giá trị px trước, sau đó thêm giá trị rem làm fallback
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */