От автора: в этом фрагменте я хочу поделиться с вами тем, что я делаю при изменении размеров элементов в DevTools браузера.
Предположим, вы реализуете дизайн в HTML и CSS и хотите поэкспериментировать с шириной и высотой иконки. Учтите следующее:
1 2 3 4 5 |
.icon { --size: 32px; width: var(--size); height: var(--size); } |
В DevTools браузера вы можете изменить значение переменной —size, и это повлияет и на width, и на height. См. макет ниже для визуального сравнения CSS и приложения Sketch.
В Sketch вам нужно активировать блокировку, чтобы поддерживать одинаковое значение для обоих параметров.
Различные значения ширины и высоты
Не все формы являются идеальными квадратами, что, если вы хотите изменить размер элемента с разными значениями для width и height? Что ж, соотношение сторон вам в помощь.
Во-первых, вам нужно рассчитать соотношение сторон между шириной и высотой элемента. В этом примере у нас есть прямоугольник. Его ширина 186px и высота есть 79px. Цель состоит в том, чтобы рассчитать соотношение между этими двумя значениями.
Соотношение сторон = ширина / высота
Соотношение сторон = 186/79 = 2,35
Затем мы заменим соотношения с помощью функции CSS calc().
1 2 3 4 5 6 |
.rect { --size: 186px; /* [1] */ --aspect-ratio: 2.35; /* [2] */ width: var(--size); /* [3] */ height: calc(var(--size) / var(--aspect-ratio)); /* [4] */ } |
Если вы хотите поэкспериментировать с описанным выше в браузере, вот демонстрация на CodePen.
Автор: Ahmad Shadeed
Источник: //ishadeed.com
Редакция: Команда webformyself.