7.1 Nguyên tắc cơ bản
Phông chữ đáp ứng đóng vai trò quan trọng trong việc tạo ra thiết kế web thích ứng. Sử dụng các đơn vị tương đối như vw, vh, vmin, và vmax, cho phép phông chữ thay đổi linh hoạt dựa trên kích thước của viewport, đảm bảo hiển thị tối ưu văn bản trên các thiết bị khác nhau. Hãy cùng tìm hiểu chi tiết cách hoạt động của các đơn vị này và cách sử dụng chúng để tạo ra phông chữ đáp ứng.
Khái niệm cơ bản
vw và vh:
vw(viewport width): 1 đơn vịvwbằng 1% chiều rộng của viewportvh(viewport height): 1 đơn vịvhbằng 1% chiều cao của viewport
vmin và vmax:
vmin(viewport minimum): 1 đơn vịvminbằng 1% kích thước nhỏ hơn của viewport (có thể là chiều rộng hoặc chiều cao)vmax(viewport maximum): 1 đơn vịvmaxbằng 1% kích thước lớn hơn của viewport (có thể là chiều rộng hoặc chiều cao)
Lợi ích của phông chữ đáp ứng:
- Cải thiện khả năng đọc: kích thước phông chữ tự động điều chỉnh theo kích thước màn hình, đảm bảo đọc thoải mái trên mọi thiết bị
- Thiết kế linh hoạt: phông chữ đáp ứng giúp duy trì thiết kế hài hòa và cân bằng khi thay đổi kích thước viewport
- Cách tiếp cận đồng nhất: sử dụng các đơn vị tương đối cho phông chữ cho phép duy trì một cách tiếp cận đồng nhất trong việc tạo thiết kế thích ứng
7.2 Ví dụ sử dụng vw và vh
Ví dụ 1: Kích thước phông chữ cơ bản với vw
Tạo một ví dụ trong đó kích thước phông chữ thay đổi dựa trên chiều rộng của viewport:
body {
font-size: 2vw; /* Kích thước phông chữ bằng 2% chiều rộng của viewport */
}
h1 {
font-size: 4vw; /* Kích thước phông chữ tiêu đề bằng 4% chiều rộng của viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phông chữ đáp ứng với vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tiêu đề đáp ứng</h1>
<p>Văn bản này thay đổi kích thước dựa trên chiều rộng của viewport.</p>
</body>
</html>
Giải thích mã:
body { font-size: 2vw; }: thiết lập kích thước phông chữ cho văn bản bên trongbody, bằng 2% chiều rộng của viewporth1 { font-size: 4vw; }: thiết lập kích thước phông chữ cho tiêu đềh1, bằng 4% chiều rộng của viewport
Ví dụ 2: Kích thước phông chữ cơ bản với vh
Bây giờ tạo một ví dụ trong đó kích thước phông chữ thay đổi dựa trên chiều cao của viewport:
body {
font-size: 2vh; /* Kích thước phông chữ bằng 2% chiều cao của viewport */
}
h1 {
font-size: 4vh; /* Kích thước phông chữ tiêu đề bằng 4% chiều cao của viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phông chữ đáp ứng với vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tiêu đề đáp ứng</h1>
<p>Văn bản này thay đổi kích thước dựa trên chiều cao của viewport.</p>
</body>
</html>
Giải thích mã:
body { font-size: 2vh; }: thiết lập kích thước phông chữ cho văn bản bên trongbody, bằng 2% chiều cao của viewporth1 { font-size: 4vh; }: thiết lập kích thước phông chữ cho tiêu đềh1, bằng 4% chiều cao của viewport
7.3 Ví dụ sử dụng vmin và vmax
Ví dụ 1: Kích thước phông chữ cơ bản với vmin
Tạo một ví dụ trong đó kích thước phông chữ thay đổi dựa trên kích thước nhỏ hơn của viewport:
body {
font-size: 2vmin; /* Kích thước phông chữ bằng 2% kích thước nhỏ hơn của viewport */
}
h1 {
font-size: 4vmin; /* Kích thước phông chữ tiêu đề bằng 4% kích thước nhỏ hơn của viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phông chữ đáp ứng với vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tiêu đề đáp ứng</h1>
<p>Văn bản này thay đổi kích thước dựa trên kích thước nhỏ hơn của viewport.</p>
</body>
</html>
Giải thích mã:
body { font-size: 2vmin; }: thiết lập kích thước phông chữ cho văn bản bên trongbody, bằng 2% kích thước nhỏ hơn của viewporth1 { font-size: 4vmin; }: thiết lập kích thước phông chữ cho tiêu đềh1, bằng 4% kích thước nhỏ hơn của viewport
Ví dụ 2: Kích thước phông chữ cơ bản với vmax
Tạo một ví dụ trong đó kích thước phông chữ thay đổi dựa trên kích thước lớn hơn của viewport:
body {
font-size: 2vmax; /* Kích thước phông chữ bằng 2% kích thước lớn hơn của viewport */
}
h1 {
font-size: 4vmax; /* Kích thước phông chữ tiêu đề bằng 4% kích thước lớn hơn của viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phông chữ đáp ứng với vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tiêu đề đáp ứng</h1>
<p>Văn bản này thay đổi kích thước dựa trên kích thước lớn hơn của viewport.</p>
</body>
</html>
Giải thích mã:
body { font-size: 2vmax; }: thiết lập kích thước phông chữ cho văn bản bên trongbody, bằng 2% kích thước lớn hơn của viewporth1 { font-size: 4vmax; }: thiết lập kích thước phông chữ cho tiêu đềh1, bằng 4% kích thước lớn hơn của viewport
GO TO FULL VERSION