Siit saate teada, kuidas luua CSS-muutujatega järgmist reageerimisvõimet.

Kuidas muuta CSS-muutujatega reageerimise ülilihtsaks

Kiire õpetus, kuidas 2018. aastal reageerivaid veebisaite luua.

Kui te pole CSS-i muutujatest varem kuulnud, on see CSS-i uus funktsioon, mis annab teile stiililehel muutujate võimsuse, ilma et peaksite seadistusi tegema.

Sisuliselt võimaldavad CSS-muutujad teil stiilide seadmise vanaviisi vahele jätta:

h1 {
  kirjasuurus: 30 pikslit;
}
navigatsiooniriba> a {
  kirjasuurus: 30 pikslit;
}

… Selle poolt:

: juur {
  --baasi-fondi suurus: 30 pikslit;
}
h1 {
  font-size: var (- alus-font-size);
}
navigatsiooniriba> a {
  font-size: var (- alus-font-size);
}

Ehkki süntaks võib tunduda pisut imelik, annab see teile ilmselge eelise, kui saate muuta kogu rakenduse kirjasuurusi, muutes ainult muutujat - base-font-size.

Kui soovite CSS-muutujaid korralikult õppida, vaadake minu tasuta ja interaktiivset CSS-muutujate kursust Scrimba kohta:

Kursus sisaldab kaheksat interaktiivset ekraanisaadet.

Või kui soovite kursuse kohta rohkem teada saada, lugege järgmisest artiklist ka õpitut.

Vaatame nüüd, kuidas see uus tehnoloogia saab teie elu lihtsamaks muuta tundlike veebisaitide loomisel.

Seadistamine

Lisame reageerimisvõimet portfelli veebisaidile, mis näeb välja järgmine:

See näeb töölaual vaadates kena välja. Kuid nagu näete vasakpoolsest pildist, ei tööta see paigutus mobiilis hästi.

Vasakul: kuidas see esialgu mobiililt välja näeb. Paremal: kuidas me tahame, et see välja näeks.

Parempoolsel pildil oleme mõned stiilid muutnud, et muuta see paremini mobiilis kasutamiseks. Oleme teinud järgmist:

  1. Võre ümberkorraldamine nii, et see virnastataks vertikaalselt, mitte kahe veeru kohal.
  2. Nihutas kogu paigutust natuke rohkem üles
  3. Fontide suurust vähendati

Selleks pidime muutma järgmist CSS-i:

h1 {
  kirjasuurus: 30 pikslit;
}
#navbar {
  veeris: 30 pikslit 0;
}
#navbar a {
  kirjasuurus: 30 pikslit;
}
.grid {
  veeris: 30 pikslit 0;
  ruudustik-mall-veerud: 200 pikslit 200 pikslit;
}

Täpsemalt, me pidime meediumipäringu sees tegema järgmised muudatused:

  • Vähendage h1 fondi suurust kuni 20 pikslit
  • Vähendage marginaali #navbar kohal ja all 15 pikslile
  • Vähendage #navbari sees fondi suurust 20 pikslile
  • Vähendage ruutvõrgu kohal olevat marginaali 15 pikslini
  • Muutke .grid kahest veerust ühe veeruga
Märkus: loomulikult on selles rakenduses CSS-i palju rohkem, isegi nendes valijates. Selle õpetuse huvides olen siiski ära võtnud kõik, mida me meediumipäringus ei muuda. Vaadake seda Scrimba mänguväljakut, et saada kogu kood.

Vana viis

See kõik oleks võimalik ilma CSS-muutujateta. Kuid see nõuaks tarbetu koguse koodi, kuna enamikul ülaltoodud täppide punktidest oleks meediumipäringu sees vaja oma valijat, näiteks:

@media kõik ja (maksimaalne laius: 450 pikslit) {
  
  navigatsiooniriba {
    veeris: 15 px 0;
  }
  
  navbar a {
    kirjasuurus: 20 pikslit;
  }
  
  h1 {
    kirjasuurus: 20 pikslit;
  }
  .grid {
    veeris: 15 px 0;
    ruudustik-mall-veerud: 200 pikslit;
  }
}

Uus viis

Vaatame nüüd, kuidas seda CSS-muutujatega lahendada. Alustuseks salvestame pigem väärtused, mida kasutame uuesti või muudame muutujate sees:

: juur {
  --baasi-fondi suurus: 30 pikslit;
  - veerud: 200 pikslit 200 pikslit;
  - baasveeris: 30 pikslit;
}

Ja siis kasutame neid muutujaid kogu rakenduses:

#navbar {
  marginaal: var (- baasmarginaal) 0;
}
#navbar a {
  font-size: var (- alus-font-size);
}
h1 {
  font-size: var (- alus-font-size);
}
.grid {
  varu: var (- baasmarginaal) 0;
  ruudustik-mall-veerud: var (- veerud);
}

Kui see seadistus on olemas, saame meediumipäringu sees olevate muutujate väärtusi lihtsalt muuta:

@media kõik ja (maksimaalne laius: 450 pikslit) {
  : juur {
    - veerud: 200 pikslit;
    - baasveeris: 15 px;
    --baasi-fondi suurus: 20 pikslit;
}

See on palju puhtam kui see, mis meil enne oli. Meie sihtrühm on ainult juur, mitte kõigi valijate määratlemine.

Oleme meediumipäringu vähendanud neljalt valijalt ühele ja kolmeteistkümnele reale neljale.

Ja see on lihtsalt lihtne näide. Kujutage ette täiemahulist veebisaiti, kus näiteks --baas-marginaal kontrollib enamikku rakenduse ümber olevatest vabadest vahemaadest. Selle väärtus on palju lihtsam, kui meediumipäringu täitmine keerukate valijatega.

Kokkuvõtlikult võib öelda, et CSS-muutujad on kindlasti reageerimisvõime tulevik. Kui soovite seda tehnoloogiat lõplikult õppida, soovitaksin teil tutvuda minu selleteemalise tasuta kursusega Scrimba alal.

Sinust saab kohe CSSi muutujate meister :)

Täname, et lugesite! Olen Per Borgen, Scrimba esiosa arendaja ja kaasasutaja. Kui teil on küsimusi või kommentaare, võtke minuga Twitteri kaudu ühendust.