Пропорциональное изменение размера с помощью переменных CSS

Дата публикации: 2020-09-30

От автора: в этом фрагменте я хочу поделиться с вами тем, что я делаю при изменении размеров элементов в DevTools браузера.

Предположим, вы реализуете дизайн в HTML и CSS и хотите поэкспериментировать с шириной и высотой иконки. Учтите следующее:

.icon {
  --size: 32px;
  width: var(--size);
  height: var(--size);
}

.icon {

--size: 32px;

width: var(--size);

height: var(--size);

}

В DevTools браузера вы можете изменить значение переменной —size, и это повлияет и на width, и на height. См. макет ниже для визуального сравнения CSS и приложения Sketch.

Пропорциональное изменение размера с помощью переменных CSS

В Sketch вам нужно активировать блокировку, чтобы поддерживать одинаковое значение для обоих параметров.

Различные значения ширины и высоты

Пропорциональное изменение размера с помощью переменных CSS

Не все формы являются идеальными квадратами, что, если вы хотите изменить размер элемента с разными значениями для width и height? Что ж, соотношение сторон вам в помощь.

Во-первых, вам нужно рассчитать соотношение сторон между шириной и высотой элемента. В этом примере у нас есть прямоугольник. Его ширина 186px и высота есть 79px. Цель состоит в том, чтобы рассчитать соотношение между этими двумя значениями.

Соотношение сторон = ширина / высота

Соотношение сторон = 186/79 = 2,35

Затем мы заменим соотношения с помощью функции CSS calc().

Пропорциональное изменение размера с помощью переменных CSS

.rect {
  --size: 186px; /* [1] */
  --aspect-ratio: 2.35; /* [2] */
  width: var(--size); /* [3] */
  height: calc(var(--size) / var(--aspect-ratio)); /* [4] */
}

.rect {

--size: 186px; /* [1] */

--aspect-ratio: 2.35; /* [2] */

width: var(--size); /* [3] */