Menggunakan Variabel dalam Kueri Media CSS

Menggunakan variabel di pencarian media

Sekarang, kami ingin merubah nilai variabel di pencarian media.

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

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

Ini adalah contoh yang lengkap:

实例

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

Coba Sendiri

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;
  }
}

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini sepenuhnya.

Fungsi
var() 49.0 15.0 31.0 9.1 36.0

Fungsi var() CSS

Fungsi Deskripsi
var() Masukkan nilai variabel CSS.