Medya Sorgularında Değişkenleri Kullanan CSS
Medya Sorgularında Değişkenleri Kullanma
Şimdi bir medya sorgusu içindeki değişken bir değeri değiştirmek istiyoruz.
İpucu: Medya Sorguları, farklı cihazlar (ekranlar, tabletler, cep telefonları vb.) için farklı stil kuralları tanımlamakla ilgilidir. Medya Sorguları Bölümümüzde daha fazla Medya Sorgusu öğrenebilirsiniz .
Burada öncelikle sınıf için --fontsize adında yeni bir yerel değişken tanımlıyoruz
.container
. Değerini 25 piksele ayarladık. Daha sonra
.container
sınıfta daha aşağıda kullanırız. Ardından,
@media
"Tarayıcının genişliği 450 piksel veya daha geniş olduğunda, sınıfın --fontsize değişken değerini 50 piksel olarak değiştirin" diyen bir kural
oluşturuyoruz .container
.
İşte tam örnek:
Örnek
/* 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;
}
}
Kuraldaki --blue değişkeninin değerini de değiştirdiğimiz başka bir örnek @media
:
Örnek
/* 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;
}
}
Tarayıcı Desteği
Tablodaki sayılar,
var()
işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() İşlevi
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |