Giới thiệu
rem và em là 2 loại đơn vị khá đặc biệt, chúng cho phép chúng ta kiểm soát đồng nhất kích thước ở nhiều vị trí khác nhau, hỗ trợ hình thành giao diện responsive một cách đơn giản.
Đơn vị rem
rem là viết tắt của “root em”. Đơn vị này được tính toán dựa trên kích thước của phần tử gốc (root) của trang web. Thông thường, phần tử gốc sẽ là thẻ <html>. Khi sử dụng rem, giá trị của nó sẽ thay đổi dựa trên kích thước của phần tử gốc.
Ví dụ, nếu bạn đặt kích thước phần tử gốc là 16px, một giá trị rem bằng 1 sẽ tương đương với 16px. Nếu bạn muốn đặt kích thước một phần tử là 2 lần kích thước phần tử gốc, bạn có thể sử dụng giá trị rem bằng 2.
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* Kích thước font chính xác là 32px */
}
p {
font-size: 1.5rem; /* Kích thước font chính xác là 24px */
}
Đơn vị em
em là đơn vị đo tương tự như rem, tuy nhiên nó dựa trên kích thước của phần tử cha. Nếu phần tử cha có kích thước font là 16px và phần tử con có giá trị em là 2, kích thước font của phần tử con sẽ là 32px.
.parent {
font-size: 16px;
}
.child {
font-size: 2em; /* Kích thước font chính xác là 32px */
}
Sự khác biệt giữa rem và em
Mặc dù rem và em đều có thể giúp chúng ta tạo ra giao diện đáp ứng, chúng có một số điểm khác nhau quan trọng:
remdựa trên kích thước của phần tử gốc (root), trong khiemdựa trên kích thước của phần tử cha.remgiúp đảm bảo tính nhất quán trong toàn bộ trang web, trong khiemcó thể tạo ra kết quả khác nhau nếu các phần tử có phần tử cha khác nhau.
Sử dụng rem và em trong responsive design
Để tận dụng tối đa rem và em trong việc tạo ra giao diện đáp ứng, bạn có thể sử dụng chúng vào các thuộc tính như kích thước font, padding, margin, v.v.
.container {
font-size: 1.5rem; /* Kích thước font chính xác là 24px */
padding: 2rem; /* Padding chính xác là 32px */
}
.button {
font-size: 1.2em; /* Kích thước font chính xác là 19.2px */
margin-bottom: 1.5em; /* Margin chính xác là 24px */
}
Khi sử dụng rem và em, bạn có thể đảm bảo rằng giao diện của bạn sẽ thích ứng với các kích thước màn hình khác nhau. Nó giúp tăng tính nhất quán và đồng nhất trên toàn bộ trang web.