在媒体查询中使用变量 CSS

Menggunakan variabel di pencarian media

Sekarang, kami ingin merubah nilai variabel di pencarian media.

Petunjuk:Pencarian media di tujuannya adalah untuk menentukan aturan gaya yang berbeda untuk perangkat yang berbeda (layar, tablet, ponsel, dll). Anda dapat belajar lebih banyak tentang pencarian media di bab 'Pencarian Media'.

Di sini, kami pertama-tama mengumumkan variabel lokal baru bernama --fontsize untuk kelas .container. Kami menetapkan nilai nya 25 piksel. kemudian kami gunakan nya di kelas .container. kemudian, kami membuat aturan @media, yang berisi 'Ketika lebar browser 450px atau lebar yang lebih luas, ubah nilai variabel --fontsize kelas .container menjadi 50px.'

Ini adalah contoh penuh:

实例

/* 变量声明 */
: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;
  }
}

试一试 亲自

Ini adalah contoh lain, di mana kami juga mengubah nilai variabel --blue dalam aturan @media:

实例

/* 变量声明 */
: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

函数 var() CSS

函数 描述
var() 值 插入 CSS 变量