CSS ใช้ตัวแปรในมีเดียควิชา
- หน้าก่อน CSS ตัวแปร - JavaScript
- หน้าต่อไป CSS @property
在媒體查詢中使用變量
現在，我們希望在媒體查詢中修改变量值。
提示：媒體查詢旨在為不同的設備（顯示器、平板電腦、手機等）定義不同的樣式規則。您可以在“媒體查詢”一章中學習更多有關媒體查詢的知識。
在这里，我们首先为 .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 |
- หน้าก่อน CSS ตัวแปร - JavaScript
- หน้าต่อไป CSS @property
