CSS dəyişənlərindən istifadə edərək aşağıdakı cavab qabiliyyətini necə yaratmağı öyrənin.

CSS dəyişənləri ilə həssaslığı necə asanlaşdırmaq olar

2018-ci ildə həssas veb saytların qurulmasına dair sürətli təlimat.

CSS dəyişənləri haqqında heç eşitməmisinizsə, CSS-in yeni bir xüsusiyyətidir ki, heç bir tənzimləmə etmədən üslub cədvəlinizdəki dəyişənlərin imkanlarından istifadə edə bilərsiniz.

Əslində, CSS dəyişənləri köhnə tərz üslubunu atlamağa imkan verir:

h1 {şrift ölçüsü: 30px; }
navbar> a {font size: 30px; }

… Buna görə:

: Kök {--base-font-size: 30px; }
h1 {şrift ölçüsü: var (- əsas şrift ölçüsü); }
navbar> a {font size: var (- əsas font size); }

Sintaksis bir az qəribə görünsə də, tətbiq bazası şrift ölçülərini yalnız baza şrift ölçüsü dəyişənini dəyişdirə biləcəyiniz açıq bir üstünlüyə malikdir.

CSS dəyişənlərini düzgün öyrənmək istəyirsinizsə, xahiş edirəm Scrimba-dakı pulsuz və interaktiv CSS dəyişən kursuma baxın:

Kursda səkkiz interaktiv ekran var.

Kurs haqqında daha çox məlumat əldə etmək istəyirsinizsə, aşağıdakı məqalələrə giriş də oxuya bilərsiniz:

İndi gəlin görək bu yeni texnologiya həyatınızı həssas veb saytlar yaratmaqda necə asanlaşdırır.

Müəssisə

Aşağıdakı kimi görünən bir portfel veb saytına daha çox cavab verəcəyik:

Masaüstünüzdə görünəndə əla görünür. Lakin, aşağıdakı sol şəkildən də gördüyünüz kimi, mobil telefonlarda bu tərtib düzgün işləmir.

Sol: Cib telefonunda əvvələ necə baxır. Sağ: necə olmalıdır?

Sağdakı şəkildəki stillərdə mobil cihazlarda daha yaxşı işləmələri üçün bəzi dəyişikliklər etdik. Budur nə etdik:

  1. Şəbəkə iki sütunun əvəzinə şaquli olaraq yığılacağı şəkildə yenidən düzəldilmişdir.
  2. Bütün tərtib bir az yuxarıya qaldırıldı
  3. Şriftləri kiçiltir

Bunu etmək üçün aşağıdakı CSS-i dəyişdirməli idik:

h1 {şrift ölçüsü: 30px; }
#navbar {margin: 30px 0; }
#navbar a {font size: 30px; }
.Grid {margin: 30px 0; Izgara şablon sütunları: 200px 200px; }

Xüsusilə, bir media sorğusunda aşağıdakı düzəlişləri etməli idik:

  • H1-in şrift ölçüsünü 20px-ə endirin
  • # Navbarın yuxarı və aşağı hissəsini 15 pikselə endirin
  • #Navbardakı şrift ölçüsünü 20px-ə endirin
  • Şəbəkənin üstündəki haşiyəni 15 pikselə endirin
  • Şəbəkəni "iki sütundan" "bir sütuna" dəyişdirin
Qeyd: Bu seçicilərdə belə, bu tətbiqdə əlbəttə ki, daha çox CSS var. Ancaq bu təlimat üçün media sorğusunda dəyişdirmədiyimiz hər şeyi sildim. Bütün kodlar üçün bu scrimba oyun sahəsinə baxın.

Köhnə yol

Bütün bunlar CSS dəyişənləri olmadan mümkün olacaqdı. Bununla birlikdə, lazımsız bir miqdarda kod tələb edəcəkdir, çünki yuxarıdakı güllə nöqtələrinin əksəriyyəti media sorğusunda öz seçimçisinə ehtiyac duyur, buna görə:

@media hamısı və (maksimum genişlik: 450px) {navbar {margin: 15px 0; } navbar a {font size: 20px; } h1 {şrift ölçüsü: 20px; }
.Grid {margin: 15px 0; Şəbəkə Şablon Sütunları: 200 piksel; }
}

Yeni yol

İndi görək bunun CSS dəyişənlərindən istifadə edərək necə həll oluna bilər. Birincisi, dəyişənlərdə istifadə etdiyimiz və ya dəyişdirdiyimiz dəyərləri saxlamağı üstün tuturuq:

: Kök {--base-font-size: 30px; - Sütunlar: 200px 200px; -Baza marjası: 30px; }

Və sonra yalnız tətbiq boyunca bu dəyişənlərdən istifadə edirik:

#navbar {margin: var (- base-margin) 0; }
#navbar a {şrift ölçüsü: var (- əsas şrift ölçüsü); }
h1 {şrift ölçüsü: var (- əsas şrift ölçüsü); }
.Grid {margin: var (- base-margin) 0; Şəbəkə şablonu sütunları: var (- sütunlar); }

Bu quraşdırma qurulduqdan sonra media sorğusundakı dəyişənlərin dəyərlərini dəyişə bilərik:

@media hamısı və (maksimum genişlik: 450px) {: kök {- sütunlar: 200px; -Baza marjası: 15px; - əsas şrift ölçüsü: 20px; }

Əvvəllər olduğundan daha təmizdir. Bütün seçiciləri göstərmək əvəzinə yalnız: kök hədəf alırıq.

Media sorğumuzu dörd seçicidən birinə, on üçdən dördünə endirdik.

Və bu, sadəcə sadə bir nümunədir. Məsələn, -base-margin tətbiqin ətrafındakı boş yerlərin çoxunu idarə etdiyi tam bir veb sayt düşünün. Dəyəri çevirmək, media sorğunuzu mürəkkəb seçicilərlə doldurmaqdan daha asandır.

Nəticə olaraq, CSS dəyişənləri mütləq cavab vermə gələcəyidir. Bu texnologiyanı birdəfəlik öyrənmək istəyirsinizsə, pulsuz Scrimba dərsimi keçməyinizi məsləhət görürəm.

Qısa müddətdə CSS dəyişən ustası olacaqsınız :)

Oxuduğunuz üçün təşəkkür edirik! Mən Per Borgen, ön tərəfdən geliştirici və Scrimba-nın həmtəsisçisiyəm. Hər hansı bir sualınız və ya şərhiniz varsa, Twitter-də mənə müraciət etməkdən çəkinməyin.