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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы хотите поэкспериментировать с описанным выше в браузере, вот демонстрация на CodePen.

Автор: Ahmad Shadeed

Источник: //ishadeed.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.