CSS rem() — залишок від ділення, а не одиниця rem

Опис

Експериментальна технологія: Перед використанням уважно перевірте таблицю сумісності з браузерами.

Функція mod() використовується для обчислення залишку від ділення двох чисел. Наприклад, rem(27, 5) повертає залишок 2. При діленні 27 на 5, результат дорівнює 5 з залишком 2. Повний розрахунок виглядає так: 27 / 5 = 5 5 + 2.

Ця функція дозволяє отримувати залишок від ділення чисел у CSS. Вона може бути корисною, коли вам потрібно виконати операції, пов'язані з циклічністю або знаходженням залишку від ділення. Застосовуючи rem(), ви можете працювати зі залишками чисел у вашому CSS коді.

Приклад використання функції rem() в CSS:

div {
  width: rem(500, 3); /* Задає ширину елемента як залишок ділення 500 на 3 */
  background-color: red;
}

У цьому прикладі ширина елемента div буде обчислена як залишок ділення числа 500 на 3, що дорівнює 2. Таким чином, елемент отримає ширину 2 одиниці.

правити

Загальний опис

правити

Порада

Використовуйте функцію rem() там, де вам потрібно працювати зі залишками чисел у CSS, зокрема для створення адаптивних та гнучких розмірів.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

rem(<number1>, <number2>);

Функція rem може отримувати 2 значень:

<number1>

Числове значення, перше число для обчислення залишку від ділення.

автор: NagarD

правити

<number2>

Числове значення, друге число для обчислення залишку від ділення.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	125	118	15.4	111	125	—

Підтримка: мобільні переглядачі

Переглядач
	125	125	118	15.4

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Залишок від ділення на лінійці</h2>
  <p>Сірі блоки — це цілі 150px, помаранчевий хвостик — залишок, порахований функцією rem().</p>
</div>

<div id="result">
  <div class="track">
    <div class="unit">150px</div>
    <div class="unit">150px</div>
    <div class="unit">150px</div>
    <div class="leftover"></div>
  </div>
  <p>Смуга завширшки 500px. Ширина хвостика — rem(500px, 150px) = 50px.</p>
</div>

#description {
  background: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  padding: 24px;
  font-family: Arial, sans-serif;
}

.track {
  width: 500px;
  display: flex;
  border: 2px solid #999;
}

.unit {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 150px;
  height: 40px;
  background: #c8c8c8;
  border-right: 1px solid #fff;
  color: #333;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leftover {
  flex: 0 0 auto;
  width: rem(500px, 150px);
  height: 40px;
  background: #ff6347;
}

#result p {
  margin-top: 12px;
  font-size: 13px;
  color: #555;
}