Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Jednostki miary

Jednostki miary

Frontend SELF PL
Poziom 25 , Lekcja 3
Dostępny

4.1 Wartości procentowe

Wartości procentowe i jednostki względne w CSS odgrywają ważną rolę w tworzeniu elastycznych i responsywnych layoutów. Pozwalają elementom dostosować się do różnych rozmiarów ekranów i zmieniających się warunków, zapewniając lepszą kompatybilność i wygodę użytkowania.

Wartości procentowe są używane do określania rozmiarów elementów w odniesieniu do rozmiarów ich rodzica. Dzięki temu layout jest bardziej elastyczny i adaptowalny.

Przykład użycia %:

CSS 
    
      .container {
        width: 80%;
        margin: 0 auto;
        background-color: #f4f4f4;
      }

      .box {
        width: 50%;
        padding-top: 25%; /* Proporcje 1:2 */
        background-color: #3498db;
        color: white;
        text-align: center;
        position: relative;
      }

      .box::before {
        content: "";
        display: block;
        padding-top: 50%; /* Proporcje 2:1 */
      }
HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Przykład użycia %</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div style="min-height: 200px;">
            <div class="container">
              <div class="box">Zawartość</div>
            </div>
          </div>
        </body>
      </html>
C++
HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Przykład użycia %</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="container">
            <div class="box">Zawartość</div>
          </div>
        </body>
      </html>

Wyjaśnienie kodu:

  • .container: ustawia szerokość kontenera jako 80% szerokości elementu nadrzędnego, centralizując go za pomocą margin: 0 auto
  • .box: ustawia szerokość bloku jako 50% szerokości kontenera. Wysokość bloku określana jest przez padding-top, co zapewnia proporcje 1:2

4.2 Jednostki względne (em i rem)

Jednostka em — to jednostka względna, która zależy od rozmiaru czcionki elementu nadrzędnego. Jeśli rozmiar czcionki rodzica się zmienia, to wartości em również się zmieniają.

Przykład użycia em:

CSS 
    
      .parent {
        font-size: 16px;
      }

      .child {
        font-size: 1.5em; /* 1.5 * 16px = 24px */
        padding: 1em; /* 1 * 16px = 16px */
      }

Jednostka rem — to jednostka względna, która zależy od rozmiaru czcionki elementu korzennego (html). Nie zależy od elementów nadrzędnych, co czyni ją bardziej przewidywalną i wygodną do tworzenia skalowalnych layoutów.

Przykład użycia rem:

HTML 
    
      <div class="container">
        Jakiś tekst wewnątrz kontenera
        <div class="box">
          Jakiś tekst wewnątrz pudełka
        </div>
      </div>
CSS 
    
      html {
        font-size: 16px;
      }

      .container {
        font-size: 1rem; /* 16px */
        padding: 2rem; /* 32px */
      }

      .box {
        font-size: 1.5rem; /* 24px */
        margin: 1rem; /* 16px */
      }

Porównanie em i rem:

  • em: zależy od rozmiaru czcionki elementu nadrzędnego, co może prowadzić do efektu kaskadowego przy zagnieżdżaniu
  • rem: zależy od rozmiaru czcionki elementu korzennego (html), co czyni je bardziej przewidywalnymi i prostymi w użyciu

4.3 Łączne użycie %

Użycie jednostek względnych (em i rem) w połączeniu z procentami pozwala tworzyć elastyczne i responsywne layouty, które będą poprawnie wyświetlane na każdym urządzeniu.

Przykład: Łączne użycie %

Stworzymy layout, w którym rozmiary elementów są określane przy użyciu procentów i jednostek względnych.

CSS 
    
      html {
        font-size: 16px;
      }

      .container {
        width: 80%;
        margin: 0 auto;
      }

      .header, .footer {
        background-color: #333;
        color: white;
        padding: 1rem;
        text-align: center;
      }

      .content {
        display: flex;
        gap: 1rem;
        margin: 1rem 0;
      }

      .sidebar {
        flex: 1 1 30%;
        background-color: #f4f4f4;
        padding: 1rem;
      }

      .main {
        flex: 1 1 70%;
        background-color: #e4e4e4;
        padding: 1rem;
      }
HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Łączne użycie % i jednostek względnych</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="container">
            <div class="header">Nagłówek</div>
            <div class="content">
              <div class="sidebar">Panel boczny</div>
              <div class="main">Główna zawartość</div>
            </div>
            <div class="footer">Stopka</div>
          </div>
        </body>
      </html>

Wyjaśnienie kodu:

  • html: ustawia podstawowy rozmiar czcionki dla całego dokumentu
  • .container: używa procentów do określenia szerokości kontenera i centralizowania go na stronie
  • .header i .footer: używają rem do odstępów, co czyni je przewidywalnymi
  • .content: używa Flexbox do rozmieszczenia panelu bocznego i głównej zawartości z przerwą między nimi
  • .sidebar i .main: używają procentów do określenia szerokości kolumn i rem do odstępów
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION