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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

Автор: Ahmad Shadeed

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

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

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

Комментарии Facebook:

Комментирование закрыто.