7.1 基本原則
回應式字體 在建立 自適應網頁設計 中扮演了重要角色。使用像
vw、vh、vmin 和 vmax 這樣的相對單位，可以讓字體動態調整，依據視窗尺寸改變，
確保文字在不同裝置上呈現最佳效果。讓我們深入了解這些單位的運作方式，
以及如何使用它們來創建回應式字體。
基本概念
vw 和 vh：
vw(viewport width)：1 個單位的vw相當於視窗寬度的 1%vh(viewport height)：1 個單位的vh相當於視窗高度的 1%
vmin 和 vmax：
vmin(viewport minimum)：1 個單位的vmin相當於視窗較小維度的 1%（可能是寬度或高度）vmax(viewport maximum)：1 個單位的vmax相當於視窗較大維度的 1%（可能是寬度或高度）
回應式字體的優勢：
- 改善可讀性：字體大小會自動調整以符合屏幕尺寸，確保在任何裝置上都能舒適閱讀
- 設計靈活性：回應式字體可以在視窗尺寸改變時，協助保持和諧和均衡的設計
- 統一方法：使用相對單位設計字體，能夠維持創建自適應設計的一致方法
7.2 使用 vw 和 vh 的示例
示例 1：使用 vw 設定基礎字體大小
創建一個示例，其中字體大小會隨著視窗寬度變化：
CSS
body {
font-size: 2vw; /* 字體大小為視窗寬度的 2% */
}
h1 {
font-size: 4vw; /* 標題字體大小為視窗寬度的 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 vw 的回應式字體</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>回應式標題</h1>
<p>這段文字的大小會隨著視窗寬度而變化。</p>
</body>
</html>
代碼說明：
body { font-size: 2vw; }：設置body內文本的字體大小為視窗寬度的 2%h1 { font-size: 4vw; }：設置h1標題的字體大小為視窗寬度的 4%
示例 2：使用 vh 設定基礎字體大小
現在創建一個示例，其中字體大小會隨著視窗高度變化：
CSS
body {
font-size: 2vh; /* 字體大小為視窗高度的 2% */
}
h1 {
font-size: 4vh; /* 標題字體大小為視窗高度的 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 vh 的回應式字體</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>回應式標題</h1>
<p>這段文字的大小會隨著視窗高度而變化。</p>
</body>
</html>
代碼說明：
body { font-size: 2vh; }：設置body內文本的字體大小為視窗高度的 2%h1 { font-size: 4vh; }：設置h1標題的字體大小為視窗高度的 4%
7.3 使用 vmin 和 vmax 的示例
示例 1：使用 vmin 設定基礎字體大小
創建一個示例，其中字體大小會隨著視窗較小維度變化：
CSS
body {
font-size: 2vmin; /* 字體大小為視窗較小維度的 2% */
}
h1 {
font-size: 4vmin; /* 標題字體大小為視窗較小維度的 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 vmin 的回應式字體</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>回應式標題</h1>
<p>這段文字的大小會隨著視窗較小維度而變化。</p>
</body>
</html>
代碼說明：
body { font-size: 2vmin; }：設置body內文本的字體大小為視窗較小維度的 2%h1 { font-size: 4vmin; }：設置h1標題的字體大小為視窗較小維度的 4%
示例 2：使用 vmax 設定基礎字體大小
創建一個示例，其中字體大小會隨著視窗較大維度變化：
CSS
body {
font-size: 2vmax; /* 字體大小為視窗較大維度的 2% */
}
h1 {
font-size: 4vmax; /* 標題字體大小為視窗較大維度的 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 vmax 的回應式字體</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>回應式標題</h1>
<p>這段文字的大小會隨著視窗較大維度而變化。</p>
</body>
</html>
代碼說明：
body { font-size: 2vmax; }：設置body內文本的字體大小為視窗較大維度的 2%h1 { font-size: 4vmax; }：設置h1標題的字體大小為視窗較大維度的 4%
GO TO FULL VERSION