CSS 在媒體查詢中使用變量

在媒體查詢中使用變量

現在，我們希望在媒體查詢中修改變量值。

提示：媒體查詢旨在為不同的設備（顯示器、平板電腦、手機等）定義不同的樣式規則。您可以在“媒體查詢”一章中學習更多有關媒體查詢的知識。

在這里，我們首先為 .container 類聲明一個名為 --fontsize 的新局部變量。我們將其值設置為 25 像素。然后我們在 .container 類中進一步使用它。然后，我們創建一個 @media 規則，內容為“當瀏覽器的寬度為 450px 或更寬時，將 .container 類的 --fontsize 變量值更改為 50px。”

這是完整的實例：

實例

/* 變量聲明 */
: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() 49.0 15.0 31.0 9.1 36.0

CSS var() 函數

函數 描述
var() 插入 CSS 變量的值。