CSS käyttää muuttujia media-kyselyissä

Käytä muuttujia medianäyttöissä

Nyt haluamme muuttaa muuttujien arvoja medianäyttöissä.

Vinkki:Medianäyttöjä käytetään eri laitteiden (näytöt, tabletit, puhelimet jne.) eri tyylejä varten. Voit oppia lisää medianäytöistä medianäyttöjen luvusta.

Tässä me ensin määrittelemme uuden paikallisen muuttujan nimeltä --fontsize .container-luokalle. Asetamme sen arvoksi 25 pikseliä. Sitten me käytämme sitä edelleen .container-luokassa. Sitten luomme @media-säännön, joka sisältää tekstin ‘Kun selaimen leveys on 450px tai leveämpi, muuta .container-luokan --fontsize muuttujan arvo 50px:ksi.’

Tämä on täydellinen esimerkki:

实例

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

Kokeile itse

Tämä on toinen esimerkki, jossa olemme myös muuttaneet --blue muuttujan arvoa @media-säännöissä:

实例

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

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tämän ominaisuuden täysin.

Funktio
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktio

Funktio Kuvaus
var() Syötä CSS muuttujien arvot.