Sử dụng Đơn Vị Tương Đối trong Thiết Kế Responsive
Trong bài học này, bạn sẽ tìm hiểu cách sử dụng đơn vị tương đối trong CSS để thiết kế web responsive (phản hồi linh hoạt). Các đơn vị tương đối như %, em, rem, vw, và vh giúp giao diện tự động điều chỉnh kích thước theo thiết bị và kích thước màn hình, mang lại trải nghiệm tốt nhất cho người dùng.
- %: Đơn vị tỉ lệ dựa trên kích thước của phần tử cha.
- em: Kích thước dựa trên font-size của phần tử cha.
-
rem: Kích thước dựa trên font-size của phần tử gốc (
html). - vw và vh: Kích thước dựa trên chiều rộng và chiều cao của viewport (cửa sổ trình duyệt).
1. Các đơn vị tương đối phổ biến
-
% (Phần trăm):
- Dùng để đặt chiều rộng, chiều cao hoặc margin/padding.
- Giá trị dựa trên kích thước của phần tử cha.
- Ví dụ:
div { width: 50%; /* Chiếm 50% chiều rộng của phần tử cha */ }
-
em:
- Dựa trên
font-sizecủa phần tử cha. - Ví dụ:
p { font-size: 2em; /* Gấp đôi kích thước font của phần tử cha */ }
- Dựa trên
-
rem:
- Dựa trên
font-sizecủa phần tử gốc (html). - Ví dụ:
html { font-size: 16px; } h1 { font-size: 2rem; /* 32px, gấp đôi kích thước font của html */ }
- Dựa trên
-
vw và vh:
- vw: 1% chiều rộng của viewport.
- vh: 1% chiều cao của viewport.
- Ví dụ:
div { width: 50vw; /* 50% chiều rộng của cửa sổ trình duyệt */ height: 50vh; /* 50% chiều cao của cửa sổ trình duyệt */ }
2. Ưu điểm của đơn vị tương đối
- Tự động điều chỉnh kích thước phù hợp với màn hình.
- Dễ dàng duy trì tính nhất quán trong thiết kế.
- Phù hợp với các thiết bị có độ phân giải khác nhau.
3. Ví dụ thực tế
Tạo một khối nội dung responsive:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-size: 16px; /* Cơ sở cho rem */
}
.container {
width: 80%; /* Chiếm 80% chiều rộng cha */
padding: 2rem; /* 32px dựa trên font-size gốc */
background-color: lightblue;
}
.box {
width: 50vw; /* Chiếm 50% chiều rộng viewport */
height: 20vh; /* Chiếm 20% chiều cao viewport */
background-color: coral;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Thực hành
- Tạo một thiết kế trong đó chiều rộng các phần tử được điều chỉnh bằng
%vàvw. - Sử dụng
emvàremđể định kích thước văn bản theo cách linh hoạt. - Kết hợp
vhvàvwđể tạo các khối nội dung có kích thước phản hồi theo viewport.
Kết luận
Đơn vị tương đối trong CSS là công cụ mạnh mẽ để xây dựng giao diện linh hoạt và dễ thích nghi. Bằng cách hiểu và áp dụng chúng, bạn có thể đảm bảo rằng thiết kế của mình luôn đẹp mắt và phù hợp trên mọi thiết bị.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com