Opi luomaan seuraava reagoivuus CSS-muuttujien avulla.

Kuinka tehdä reagoinnista erittäin yksinkertainen CSS-muuttujien avulla

Pikaohje reagoivien verkkosivustojen luomiseen vuonna 2018.

Jos et ole ennen kuullut CSS-muuttujista, se on CSS: n uusi ominaisuus, joka antaa sinulle tyylitaulukon muuttujien valinnan tekemättä mitään asetuksia.

Pohjimmiltaan CSS-muuttujat antavat sinun ohittaa vanha tapa asettaa tyylejä:

h1 {
  fonttikoko: 30px;
}
navbar> a {
  fonttikoko: 30px;
}

… Tämän puolesta:

: juuri {
  - base-font-koko: 30px;
}
h1 {
  fonttikoko: var (- base-font-size);
}
navbar> a {
  fonttikoko: var (- base-font-size);
}

Vaikka syntaksi saattaa tuntua hieman oudolta, tämä antaa sinulle ilmeisen hyödyn siitä, että pystyt muuttamaan koko sovelluksen fonttikokoja muuttamalla vain - base-font-size -muuttujaa.

Jos haluat oppia CSS-muuttujat oikein, tutustu ilmaiseen ja vuorovaikutteiseen CSS-muuttujien kurssiin Scrimban yhteydessä:

Kurssi sisältää kahdeksan interaktiivista näytönohjausta.

Tai jos haluat tietää enemmän kurssista, voit myös lukea alla olevan artikkelin läpi opitut:

Katsotaan nyt, kuinka tämä uusi tekniikka voi tehdä elämästäsi helpompaa, kun rakennat reagoivia verkkosivustoja.

Asennus

Lisäämme reagoivuusportfolio-verkkosivustoon, joka näyttää tältä:

Se näyttää hyvältä, kun sitä tarkastellaan työpöydällä. Kuten alla olevasta vasemmasta kuvasta näet, tämä asettelu ei kuitenkaan toimi hyvin mobiililaitteissa.

Vasemmalla: miltä se näyttää aluksi mobiililaitteella. Oikealla: miten haluamme sen näyttävän.

Oikeanpuoleisessa kuvassa olemme muuttaneet muutamia tyylejä, jotta se toimisi paremmin mobiililaitteissa. Tässä olemme mitä olemme tehneet:

  1. Järjestää ristikon uudelleen siten, että se on pinottu pystysuoraan kahden sarakkeen sijaan.
  2. Siirrä koko asettelua hieman enemmän ylöspäin
  3. Skaalaa fontit alas

Tätä varten meidän piti muuttaa seuraava CSS:

h1 {
  fonttikoko: 30px;
}
#navbar {
  marginaali: 30 x 0;
}
#navbar a {
  fonttikoko: 30px;
}
.grid {
  marginaali: 30 x 0;
  ruudukko-malli-sarakkeet: 200 kuvapistettä 200 kuvapistettä;
}

Tarkemmin sanottuna meidän piti tehdä seuraavat mukautukset mediakyselyn sisällä:

  • Pienennä h1: n kirjasinkokoa 20 pikseliin
  • Pienennä #navbar-ylä- ja alapuolelle jäävää marginaalia 15px: ksi
  • Pienennä #navbar-fontin kokoa 20px: ksi
  • Pienennä .grid-yläraja marginaaliin 15px
  • Vaihda .grid kahdesta sarakkeesta yhdeksi sarakkeeksi
Huomaa: Tässä sovelluksessa on tietysti paljon enemmän CSS: ää, jopa näissä valitsimissa. Tämän opetusohjelman vuoksi olen kuitenkin poistanut kaiken, mitä emme muuta mediakyselyssä. Katso tämä Scrimba-leikkikenttä, niin saat koko koodin.

Vanha tapa

Kaiken tämän tekeminen olisi mahdollista ilman CSS-muuttujia. Mutta se vaatisi tarpeettoman määrän koodia, koska suurin osa yllä olevista luettelopisteistä tarvitsisi oman valitsimen mediakyselyn sisällä, kuten tämä:

@media kaikki ja (enimmäisleveys: 450 kuvapistettä) {
  
  navbar {
    marginaali: 15 x 0;
  }
  
  navbar a {
    fonttikoko: 20px;
  }
  
  h1 {
    fonttikoko: 20px;
  }
  .grid {
    marginaali: 15 x 0;
    ruudukko-malli-sarakkeet: 200 pikseliä;
  }
}

Uusi tapa

Katsotaan nyt, kuinka tämä voidaan ratkaista CSS-muuttujilla. Aluksi tallennamme mieluummin arvoja, joita uudelleenkäytämme tai joita muutamme muuttujien sisällä:

: juuri {
  - base-font-koko: 30px;
  - sarakkeet: 200 px 200 px;
  - emäsmarginaali: 30px;
}

Ja sitten me vain käytämme näitä muuttujia koko sovelluksessa:

#navbar {
  marginaali: var (- perusmarginaali) 0;
}
#navbar a {
  fonttikoko: var (- base-font-size);
}
h1 {
  fonttikoko: var (- base-font-size);
}
.grid {
  marginaali: var (- perusmarginaali) 0;
  ruudukko-malli-sarakkeet: var (- sarakkeet);
}

Kun tämä asennus on tehty, voimme yksinkertaisesti muuttaa mediakyselyn sisällä olevien muuttujien arvoja:

@media kaikki ja (enimmäisleveys: 450 kuvapistettä) {
  : juuri {
    - sarakkeet: 200px;
    - emäsmarginaali: 15px;
    - base-font-koko: 20px;
}

Tämä on paljon puhtaampaa kuin mitä meillä oli aiemmin. Kohdistamme vain: juurille, toisin kuin kaikkien valitsimien määrittämiseen.

Olemme vähentäneet mediakyselymme neljästä valitsimesta yhdeksi ja 13 rivistä neljään.

Ja tämä on vain yksinkertainen esimerkki. Kuvittele täysimittainen verkkosivusto, jossa esimerkiksi --baasi-marginaali hallitsee suurimman osan sovelluksen ympärillä olevista vapaista välilyönneistä. On paljon helpompaa vain kääntää sen arvo toisin kuin täyttää mediakyselysi monimutkaisilla valitsimilla.

Yhteenvetona voidaan todeta, että CSS-muuttujat ovat ehdottomasti vastauksen tulevaisuus. Jos haluat oppia tämän tekniikan lopullisesti, suosittelen, että tutustut ilmaiseen kurssini aiheesta Scrimba.

Sinusta tulee CSS-muuttujien mestari hetkessä :)

Kiitos lukemisesta! Olen Per Borgen, Scrimban käyttöliittymän kehittäjä ja perustaja. Ota rohkeasti yhteyttä minuun Twitterin kautta, jos sinulla on kysyttävää tai kommentteja.