4.1 百分比數值
百分比數值和相對單位在 CSS 中扮演著重要的角色，讓你的佈局更靈活且具響應性。它們讓元素適應不同的螢幕尺寸和變化的條件，確保更好的兼容性和使用便利。
百分比數值用來設定元素相對於它們父元素的尺寸。這使得佈局更加靈活和適應性。
使用 % 的範例:
CSS
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* 纵横比 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* 纵横比 2:1 */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 % 的範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="min-height: 200px;">
<div class="container">
<div class="box">內容</div>
</div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 % 的範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">內容</div>
</div>
</body>
</html>
代碼解釋:
.container: 設定容器的寬度為其父元素的 80%，並使用margin: 0 auto使其居中.box: 設定區塊的寬度為容器的 50%。區塊的高度透過padding-top來設置，確保纵横比 1:2
4.2 相對單位 (em 與 rem)
單位 em 是依賴於父元素字體大小的相對單位。如果父元素的字體大小改變，那麼 em 的值也會跟著改變。
使用 em 的範例:
CSS
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
單位 rem 是依賴於根元素 (html) 字體大小的相對單位。它不依賴於父元素，使得它更可預測，適合用來創建可擴展的佈局。
使用 rem 的範例:
HTML
<div class="container">
容器內的某些文字
<div class="box">
盒子內的某些文字
</div>
</div>
CSS
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
em 和 rem 的比較:
em: 依賴於父元素字體大小，在嵌套時可能會導致層疊效應rem: 依賴於根元素 (html) 字體大小，使其更可預測且易於使用
4.3 混合使用 %
使用相對單位 (em 和 rem) 與百分比結合，能夠創建靈活且適應的佈局，無論在什麼設備上都能正確顯示。
範例: 混合使用 %
讓我們創建一個佈局，其中元素的尺寸是通過使用百分比和相對單位來確定的。
CSS
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混合使用 % 和相對單位</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">標題</div>
<div class="content">
<div class="sidebar">側邊欄</div>
<div class="main">主要內容</div>
</div>
<div class="footer">頁尾</div>
</div>
</body>
</html>
代碼解釋:
html: 設定整個文檔的基本字體大小.container: 使用百分比設定容器的寬度，並使其居中.header和.footer: 使用rem來設置填充，使其更可預測.content: 使用 Flexbox 來排列側邊欄和主要內容，並在它們之間設置空隙.sidebar和.main: 使用百分比設定欄寬並使用rem來設置填充
GO TO FULL VERSION