Đơn vị rem trong CSS cung cấp cơ chế linh hoạt để xây dựng giao diện đáp ứng trên thiết bị di động thông qua việc điều chỉnh kích thước font-size gốc của phần tử html. Điều này cho phép thay đổi tỷ lệ toàn bộ thành phần một cách đồng bộ.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví Dụ Cơ Bản Rem</title>
<style>
html {
font-size: 16px;
}
.main-section {
width: 12rem;
height: 12rem;
background: #3498db;
}
.sub-element {
width: 9rem;
height: 9rem;
background: #e74c3c;
}
</style>
</head>
<body>
<div class="main-section">
<div class="sub-element"></div>
</div>
</body>
</html>Media query cho phép áp dụng các quy tắc CSS khác nhau tùy thuộc vào kích thước màn hình. Dưới đây là ví dụ điều chỉnh màu nền theo ngưỡng phân giải.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Cơ Bản</title>
<style>
@media (max-width: 1024px) {
body {
background: #f1c40f;
}
}
@media (max-width: 768px) {
body {
background: #2ecc71;
}
}
</style>
</head>
<body>
</body>
</html>Để kiểm soát chính xác các khoảng phân giải, có thể kết hợp min-width và max-width. Ví dụ sau định nghĩa 3 vùng màn hình khác nhau.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Chi Tiết</title>
<style>
@media (min-width: 480px) and (max-width: 767px) {
body {
background: #f39c12;
}
}
@media (min-width: 768px) {
body {
background: #9b59b6;
}
}
</style>
</head>
<body>
</body>
</html>Cấu hình font-size html dựa trên kích thước màn hình giúp tối ưu hóa rem. Dưới đây là ví dụ tính toán font-size cho các ngưỡng phổ biến.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cấu Hình Rem Động</title>
<style>
@media (min-width: 320px) {
html {
font-size: 20px;
}
}
@media (min-width: 768px) {
html {
font-size: 48px;
}
}
.responsive-box {
width: 3rem;
height: 3rem;
background: #1abc9c;
}
</style>
</head>
<body>
<div class="responsive-box"></div>
</body>
</html>Phân tách file CSS theo thiết bị giúp quản lý code hiệu quả. Mỗi file ứng với một điều kiện media query cụ thể.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tách File CSS</title>
<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">
<link rel="stylesheet" href="tablet.css" media="(min-width: 481px) and (max-width: 1024px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1025px)">
</head>
<body>
<div>Nội dung chính</div>
</body>
</html>Thư viện flexible.js tự động tính toán font-size html dựa trên tỷ lệ màn hình. Với thiết kế 750px, thư viện chia thành 10 phần (75px/1rem). Giá trị rem được tính bằng: (giá trị px trong thiết kế) / 75. Ví dụ: 150px = 2rem.
Tài liệu tham khảo: https://github.com/amfe/lib-flexible
Trình mở rộng cssrem cho VSCode hỗ trợ chuyển đổi tự động px sang rem. Sau khi cài đặt, khởi động lại IDE để áp dụng cấu hình.