4.1 基本概念
CSS 變數和媒體查詢提供了一種強大的工具來創建自適應的網頁設計，它能自動適應不同的屏幕尺寸和設備。變數允許集中的樣式管理，而媒體查詢則允許根據條件（例如屏幕寬度）改變這些樣式。
基本概念
- CSS 變數: 允許設置可以在整個 CSS 代碼中重複使用的值。它們可以在不同的上下文中修改，比如媒體查詢，使其在自適應設計中特別有用。
- 媒體查詢: 允許根據設備的特性（如屏幕的寬度或高度）應用 CSS 樣式。這樣可以使網頁在不同的設備上具有不同的外觀和行為。
在媒體查詢中使用變數
可以在媒體查詢中使用 CSS 變數來根據條件更改樣式的值。這樣可以創建更靈活且易於維護的自適應設計。
在媒體查詢中使用變數的例子：
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
HTML
<body>
<p>這是一段帶有鏈接到 <a href="#">Example.com</a> 的段落。</p>
</body>
解釋：
在這個例子中，變數的值根據屏幕寬度改變：
- 對於寬度不超過 600px 的屏幕，背景變成較暗的顏色，字體大小減小。
- 對於寬度在 601px 到 1200px 之間的屏幕，背景變成中等顏色，字體大小稍有增加。
- 對於超過 1200px 寬度的屏幕，使用變數的初始值。
4.2 媒體查詢中的變數範例
範例 1: 自適應內邊距和字體大小
CSS
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
HTML
<div class="container">
<p>這是一個具有自適應內邊距和字體大小的響應式容器。</p>
</div>
解釋：
- 在這個例子中，
.container容器根據屏幕寬度改變其內邊距和字體大小
範例 2: 使用變數和媒體查詢的網站主題化
CSS
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
HTML
<body>
<p>這段文字和鏈接將適應用戶的首選顏色方案。訪問 <a href="#">Example.com</a>。</p>
</body>
解釋：
- 在這個例子中，網站根據用戶偏好（
prefers-color-scheme: dark）改變顏色方案。 背景、文本和鏈接顏色在明亮和黑暗主題之間自動切換。
4.3 自適應網格
使用變數和媒體查詢的自適應網格範例：
CSS
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
HTML
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
解釋：
- 在這個例子中，使用自適應網格根據屏幕寬度改變列數。在窄屏幕（600px 以下），網格有一列；在中等屏幕（600px 到 900px），有兩列；在寬屏幕（超過 900px），有三列。
GO TO FULL VERSION