CSS gebruik veranderlikes in medianavrae
Gebruik veranderlikes in medianavrae
Nou wil ons 'n veranderlike waarde binne 'n medianavraag verander.
Wenk: Medianavrae gaan daaroor om verskillende stylreëls vir verskillende toestelle (skerms, tablette, selfone, ens.) te definieer. Jy kan meer Media-navrae in ons Media-navrae-hoofstuk leer .
Hier verklaar ons eers 'n nuwe plaaslike veranderlike genaamd --fontsize vir die
.containerklas. Ons stel die waarde daarvan op 25 pixels. Dan gebruik ons dit in die
.containerklas verder af. Dan skep ons 'n
@mediareël wat sê "Wanneer die blaaier se breedte 450px of wyer is, verander die --fontsize veranderlike waarde van die
.containerklas na 50px."
Hier is die volledige voorbeeld:
Voorbeeld
/* 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;
}
}
Hier is nog 'n voorbeeld waar ons ook die waarde van die --blue veranderlike in die @mediareël verander:
Voorbeeld
/* 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;
}
}
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die
var()funksie ten volle ondersteun.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funksie
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |