Junior #units#rem#em#responsive
So sánh `px`, `em`, `rem`, `%`, `vh` và khi nào dùng từng loại?
⚡ Trả lời nhanh
px là đơn vị tuyệt đối. rem tương đối với font-size của html, em tương đối với font-size của chính phần tử (hoặc cha khi dùng cho font-size), % theo cha, vh/vw theo viewport. rem phù hợp font và spacing để tôn trọng cài đặt cỡ chữ của người dùng.
| Đơn vị | Tương đối với |
|---|---|
px | Không (CSS pixel) |
rem | font-size của html (mặc định 16px) |
em | font-size của phần tử (với font-size thì của cha) |
% | Thuộc tính tương ứng của cha |
vh / vw | 1% chiều cao / rộng viewport |
html { font-size: 100%; } /* tôn trọng cài đặt trình duyệt */
h1 { font-size: 2rem; }
.btn { padding: 0.5em 1em; } /* co giãn theo cỡ chữ của nút */
.hero { min-height: 100dvh; } /* dvh: bỏ qua thanh địa chỉ mobile */