Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Одиниці вимірювання

Одиниці вимірювання

Frontend SELF UA
Рівень 25 , Лекція 3
Відкрита

4.1 Відсоткові значення

Відсоткові значення і відносні одиниці в CSS грають важливу роль у створенні гнучких і адаптивних макетів. Вони дозволяють елементам адаптуватися до різних розмірів екранів і змінних умов, забезпечуючи кращу сумісність і зручність використання.

Відсоткові значення використовуються для встановлення розмірів елементів відносно розмірів їх батьківських елементів. Це робить макет більш гнучким і адаптивним.

Приклад використання %:

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

      .box {
        width: 50%;
        padding-top: 25%; /* Співвідношення сторін 1:2 */
        background-color: #3498db;
        color: white;
        text-align: center;
        position: relative;
      }

      .box::before {
        content: "";
        display: block;
        padding-top: 50%; /* Співвідношення сторін 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>Приклад використання %</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div style="min-height: 200px;">
            <div class="container">
              <div class="box">Контент</div>
            </div>
          </div>
        </body>
      </html>
Java-університет
HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Приклад використання %</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="container">
            <div class="box">Контент</div>
          </div>
        </body>
      </html>

Пояснення коду:

  • .container: задає ширину контейнера як 80% від ширини батьківського елемента, центруючи його за допомогою margin: 0 auto
  • .box: задає ширину блоку як 50% від ширини контейнера. Висота блоку визначається через padding-top, що забезпечує співвідношення сторін 1:2

4.2 Відносні одиниці (em і rem)

Одиниця em — це відносна одиниця, яка залежить від розміру шрифту батьківського елемента. Якщо розмір шрифту батька змінюється, то em значення також змінюються.

Приклад використання em:

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

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

Одиниця rem — це відносна одиниця, яка залежить від розміру шрифту кореневого елемента (html). Вона не залежить від батьківських елементів, що робить її більш передбачуваною і зручною для створення масштабованих макетів.

Приклад використання rem:

HTML 
    
      <div class="container">
        Якийсь текст всередині контейнера
        <div class="box">
          Якийсь текст всередині коробки
        </div>
      </div>
CSS 
    
      html {
        font-size: 16px;
      }

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

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

Порівняння em і rem:

  • em: залежить від розміру шрифту батьківського елемента, що може призвести до каскадного ефекту при вкладеності
  • rem: залежить від розміру шрифту кореневого елемента (html), що робить її передбачуванішою і простою у використанні

4.3 Комбіноване використання %

Використання відносних одиниць (em і rem) у поєднанні з відсотками дозволяє створити гнучкі та адаптивні макети, які будуть коректно відображатися на будь-яких пристроях.

Приклад: Комбіноване використання %

Створимо макет, у якому розміри елементів визначаються з використанням відсотків і відносних одиниць.

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>Комбіноване використання % і відносних одиниць</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="container">
            <div class="header">Заголовок</div>
            <div class="content">
              <div class="sidebar">Бічна панель</div>
              <div class="main">Основний контент</div>
            </div>
            <div class="footer">Футер</div>
          </div>
        </body>
      </html>

Пояснення коду:

  • html: встановлює базовий розмір шрифту для всього документа
  • .container: використовує відсотки для встановлення ширини контейнера та центрування його на сторінці
  • .header і .footer: використовують rem для відступів, що робить їх передбачуваними
  • .content: використовує Flexbox для розташування бічної панелі та основного контенту із зазором між ними
  • .sidebar і .main: використовують відсотки для встановлення ширини колонок і rem для відступів
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ