CSS Medya Sorgularında Değişkenler Kullanmak

Medya sorgularında değişken kullanma

Şimdi, medya sorgularında değişken değerlerini değiştirmek istiyoruz.

İpucu:Medya sorguları, farklı cihazlar (ekranlar, tabletler, telefonlar vb.) için farklı stil kuralları tanımlamak içindir. Medya sorguları hakkında daha fazla bilgi 'Medya Sorguları' bölümünde öğrenebilirsiniz.

Burada, .container sınıfı için adı --fontsize olan yeni bir yerel değişken tanımlıyoruz. Değerini 25 piksel olarak ayarlıyoruz. Daha sonra .container sınıfında onu daha fazla kullanıyoruz. Ayrıca, '450px veya daha geniş ekran genişliğinde' .container sınıfının --fontsize değişkeninin değerini 50px olarak değiştiren bir @media kuralı oluşturuyoruz.

Bu tam örnektir:

实例

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

Kişisel Olarak Deneyin

Bu başka bir örnek, içinde @media kurallarında --blue değişkeninin değerini değiştirdiğimiz bir örnektir:

实例

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

Kişisel Olarak Deneyin

Tarayıcı Desteği

Tablo sayıları, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Fonksiyon
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Fonksiyonu

Fonksiyon Açıklama
var() CSS değişkenlerinin değerlerini ekleyin.