Dowiedz się, jak utworzyć następujący czas reakcji za pomocą Zmiennych CSS.

Jak sprawić, by szybkość reakcji była bardzo prosta dzięki Zmiennym CSS

Szybki samouczek na temat tworzenia responsywnych stron internetowych w 2018 roku.

Jeśli wcześniej nie słyszałeś o Zmiennych CSS, jest to nowa funkcja CSS, która daje moc zmiennych w arkuszu stylów, bez konieczności przeprowadzania konfiguracji.

Zasadniczo Zmienne CSS pozwalają pominąć stary sposób ustawiania stylów:

h1 {
  rozmiar czcionki: 30px;
}
pasek nawigacyjny> a {
  rozmiar czcionki: 30px;
}

… Na korzyść tego:

: root {
  --base-font-size: 30px;
}
h1 {
  font-size: var (- base-font-size);
}
pasek nawigacyjny> a {
  font-size: var (- base-font-size);
}

Chociaż składnia może wydawać się nieco dziwna, daje to oczywistą korzyść z możliwości zmiany rozmiarów czcionek w całej aplikacji poprzez zmianę tylko zmiennej - base-font-size.

Jeśli chcesz poprawnie nauczyć się Zmiennych CSS, sprawdź mój bezpłatny i interaktywny kurs Zmiennych CSS na Scrimba:

Kurs zawiera osiem interaktywnych screencastów.

Lub jeśli chcesz dowiedzieć się więcej o kursie, możesz również przeczytać omówienie tego, czego dowiesz się w poniższym artykule:

Zobaczmy teraz, jak ta nowa technologia może ułatwić Ci życie, gdy budujesz responsywne strony internetowe.

Ustawić

Dodamy responsywność do strony portfolio, która wygląda następująco:

Ładnie wygląda na komputerze. Jednak, jak widać na lewym obrazku poniżej, ten układ nie działa dobrze na urządzeniach mobilnych.

Po lewej: jak na początku wygląda na telefonie komórkowym. Po prawej: jak chcemy, żeby to wyglądało.

Na prawym zdjęciu zmieniliśmy kilka stylów, aby lepiej działały na urządzeniach mobilnych. Oto co zrobiliśmy:

  1. Zmieniono układ siatki, tak aby była ułożona pionowo zamiast w dwóch kolumnach.
  2. Przesunęłem cały układ nieco wyżej
  3. Skalowałem czcionki w dół

W tym celu musieliśmy zmienić następujący CSS:

h1 {
  rozmiar czcionki: 30px;
}
#navbar {
  margines: 30px 0;
}
#navbar a {
  rozmiar czcionki: 30px;
}
.krata {
  margines: 30px 0;
  grid-template-columns: 200px 200px;
}

Mówiąc dokładniej, musieliśmy wprowadzić następujące zmiany w zapytaniu medialnym:

  • Zmniejsz rozmiar czcionki h1 do 20px
  • Zmniejsz margines powyżej i poniżej paska #navbar do 15 pikseli
  • Zmniejsz rozmiar czcionki w #navbar do 20px
  • Zmniejsz margines powyżej .grid do 15px
  • Zmień .grid z dwóch kolumn na jedną kolumnę
Uwaga: Oczywiście w tej aplikacji jest znacznie więcej CSS, nawet w obrębie tych selektorów. Jednak na potrzeby tego samouczka usunąłem wszystko, czego nie zmieniamy w zapytaniu o media. Sprawdź ten plac zabaw Scrimba, aby uzyskać cały kod.

Po staremu

Wykonanie tego wszystkiego byłoby możliwe bez Zmiennych CSS. Wymagałoby to jednak niepotrzebnej ilości kodu, ponieważ większość powyższych punktów wymaga własnego selektora wewnątrz zapytania medialnego, takiego jak to:

@media all i (maksymalna szerokość: 450 pikseli) {
  
  pasek nawigacyjny {
    margines: 15px 0;
  }
  
  pasek nawigacji {
    rozmiar czcionki: 20px;
  }
  
  h1 {
    rozmiar czcionki: 20px;
  }
  .krata {
    margines: 15px 0;
    grid-template-columns: 200px;
  }
}

Nowy sposób

Zobaczmy teraz, jak można to rozwiązać za pomocą Zmiennych CSS. Na początek raczej przechowujemy wartości, których używamy lub zmieniamy w zmiennych:

: root {
  --base-font-size: 30px;
  --kolumny: 200px 200px;
  - margines podstawowy: 30px;
}

A potem po prostu użyjemy tych zmiennych w aplikacji:

#navbar {
  margines: var (- margines podstawowy) 0;
}
#navbar a {
  font-size: var (- base-font-size);
}
h1 {
  font-size: var (- base-font-size);
}
.krata {
  margines: var (- margines podstawowy) 0;
  grid-szablon-kolumny: var (- kolumny);
}

Po skonfigurowaniu tej konfiguracji możemy po prostu zmienić wartości zmiennych w zapytaniu o media:

@media all i (maksymalna szerokość: 450 pikseli) {
  : root {
    --kolumny: 200 pikseli;
    - margines podstawowy: 15 pikseli;
    --base-font-size: 20px;
}

To jest znacznie czystsze niż to, co mieliśmy wcześniej. Naszym celem jest tylko: root, a nie określanie wszystkich selektorów.

Skróciliśmy nasze zapytanie o media z czterech selektorów do jednego i z trzynastu linii do czterech.

A to tylko prosty przykład. Wyobraź sobie pełnowymiarową stronę internetową, na której - na przykład --base-margin kontroluje większość wolnych odstępów wokół aplikacji. O wiele łatwiej jest po prostu zmienić jego wartość, niż wypełniać zapytanie o media złożonymi selektorami.

Podsumowując, Zmienne CSS to zdecydowanie przyszłość responsywności. Jeśli chcesz nauczyć się tej technologii raz na zawsze, polecam sprawdzić mój bezpłatny kurs na ten temat na Scrimba.

Wkrótce staniesz się mistrzem Zmiennych CSS :)

Dziękuje za przeczytanie! Jestem Per Borgen, front-end developer i współzałożyciel Scrimba. Jeśli masz jakieś pytania lub komentarze, skontaktuj się ze mną za pośrednictwem Twittera.