在媒體查詢中使用 CSS 變數
在媒體查詢中使用變數
現在我們想在媒體查詢中更改變數的值。
提示：媒體查詢用於為不同裝置（螢幕、平板電腦、手機等）定義不同的樣式規則。您可以在我們的媒體查詢章節中瞭解更多關於媒體查詢的資訊。
在這裡，我們首先為 .container 類宣告一個名為 --fontsize 的新區域性變數。我們將其值設定為 25 畫素。然後我們在後面的 .container 類中使用它。然後，我們建立一個 @media 規則，其含義是“當瀏覽器寬度為 450 畫素或更寬時，將 .container 類的 --fontsize 變數值更改為 50 畫素。”
這是完整的示例
示例
/* 變數宣告 */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* 樣式 */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
}
自己動手試一試 »
這是另一個示例，我們在 @media 規則中也更改了 --blue 變數的值
示例
/* 變數宣告 */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* 樣式 */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
自己動手試一試 »
瀏覽器支援
表中的數字表示完全支援 var() 函式的第一個瀏覽器版本。
| 函式 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函式
| 屬性 | 描述 |
|---|---|
| var() | 插入 CSS 變數的值 |
