CSS Menggunakan Variabel dalam Kueri Media
Menggunakan Variabel dalam Kueri Media
Sekarang kami ingin mengubah nilai variabel di dalam kueri media.
Tip: Kueri Media adalah tentang menentukan aturan gaya yang berbeda untuk perangkat yang berbeda (layar, tablet, ponsel, dll.). Anda dapat mempelajari Kueri Media lebih lanjut di Bab Kueri Media kami .
Di sini, pertama-tama kita mendeklarasikan variabel lokal baru bernama --fontsize untuk
.containerkelas. Kami menetapkan nilainya menjadi 25 piksel. Kemudian kami menggunakannya di
.containerkelas lebih jauh ke bawah. Kemudian, kami membuat
@mediaaturan yang mengatakan "Bila lebar browser 450px atau lebih lebar, ubah nilai variabel --fontsize
.containerkelas menjadi 50px."
Berikut adalah contoh lengkapnya:
Contoh
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
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;
}
}
Berikut adalah contoh lain di mana kami juga mengubah nilai variabel --blue dalam @mediaaturan:
Contoh
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
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;
}
}
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung
var()fungsi tersebut.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Fungsi
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |