Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Zmienne w media queries

Zmienne w media queries

Frontend SELF PL
Poziom 31 , Lekcja 3
Dostępny

4.1 Podstawowe koncepcje

CSS-zmienne i media queries to potężne narzędzia do tworzenia responsywnego web designu, który automatycznie dostosowuje się do różnych rozmiarów ekranów i urządzeń. Zmienne pozwalają na centralne zarządzanie stylami, a media queries umożliwiają ich zmianę w zależności od warunków, takich jak szerokość ekranu.

Podstawowe koncepcje

  • CSS-zmienne: pozwalają na ustawianie wartości, które mogą być wielokrotnie używane w całym kodzie CSS. Mogą być zmieniane w różnych kontekstach, takich jak media queries, co czyni je szczególnie użytecznymi dla responsywnego designu.
  • Media queries: pozwalają na stosowanie stylów CSS w zależności od cech urządzenia, takich jak szerokość lub wysokość ekranu. To pozwala dostosować wygląd i zachowanie strony do różnych urządzeń.

Użycie zmiennych w media queries

CSS-zmienne można używać wewnątrz media queries do zmiany wartości stylów w zależności od warunków. To pozwala tworzyć bardziej elastyczne i łatwo utrzymywalne responsywne designy.

Przykład użycia zmiennych w media queries:

CSS 
    
      :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333;
        --primary-color: #3498db;
        --font-size: 16px;
      }

      body {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
        font-size: var(--font-size);
      }

      a {
        color: var(--primary-color);
      }

      @media (max-width: 600px) {
        :root {
          --main-bg-color: #e0e0e0;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --main-bg-color: #d0d0d0;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --main-bg-color: #f0f0f0;
          --font-size: 16px;
        }
      }
Java university
HTML 
    
      <body>
        <p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
      </body>

Wyjaśnienie:

W tym przykładzie wartości zmiennych są zmieniane w zależności od szerokości ekranu:

  • Dla ekranów o szerokości do 600px tło zmienia się na ciemniejszy odcień, a rozmiar czcionki zmniejsza się.
  • Dla ekranów o szerokości od 601px do 1200px tło zmienia się na średni odcień, a rozmiar czcionki nieco się zwiększa.
  • Dla ekranów o szerokości powyżej 1200px stosowane są oryginalne wartości zmiennych.

4.2 Przykłady zmiennych w media queries

Przykład 1: Responsywne marginesy i rozmiary czcionek

CSS 
    
      :root {
        --padding: 20px;
        --font-size: 16px;
      }

      .container {
        padding: var(--padding);
        font-size: var(--font-size);
      }

      @media (max-width: 600px) {
        :root {
          --padding: 10px;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --padding: 15px;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --padding: 20px;
          --font-size: 16px;
        }
      }
HTML 
    
      <div class="container">
        <p>This is a responsive container with adaptive padding and font size.</p>
      </div>

Wyjaśnienie:

  • W tym przykładzie kontener .container zmienia swoje marginesy i rozmiar czcionki w zależności od szerokości ekranu

Przykład 2: Theming strony z użyciem zmiennych i media queries

CSS 
    
      :root {
        --bg-color: #ffffff;
        --text-color: #000000;
        --link-color: #3498db;
      }

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
      }

      a {
        color: var(--link-color);
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --bg-color: #000000;
          --text-color: #ffffff;
          --link-color: #9b59b6;
        }
      }
HTML 
    
      <body>
        <p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
      </body>

Wyjaśnienie:

  • W tym przykładzie strona zmienia schemat kolorów w zależności od preferencji użytkownika (prefers-color-scheme: dark). Kolor tła, tekstu i linków zmieniają się automatycznie przy przełączaniu między jasnym i ciemnym motywem

4.3 Responsywna siatka

Przykład użycia zmiennych i media queries dla responsywnej siatki:

CSS 
    
      :root {
        --columns: 1fr;
        --gap: 10px;
      }

      .grid-container {
        display: grid;
        grid-template-columns: var(--columns);
        gap: var(--gap);
      }

      @media (min-width: 600px) {
        :root {
          --columns: 1fr 1fr;
        }
      }

      @media (min-width: 900px) {
        :root {
          --columns: 1fr 1fr 1fr;
        }
      }
HTML 
    
      <div class="grid-container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </div>

Wyjaśnienie:

  • W tym przykładzie używana jest responsywna siatka, która zmienia liczbę kolumn w zależności od szerokości ekranu. Na wąskich ekranach (do 600px) siatka ma jedną kolumnę, na średnich (od 600px do 900px) dwie kolumny, a na szerokich (powyżej 900px) trzy kolumny
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION