Использование функции calc в CSS

Если озвучить основное изменение в верстке сайтов последних лет, то это будет переход от фиксированных макетов к адаптивным, способным подстраиваться под любой размер воспроизводящего устройства.

Одним из удобных инструментов для построения адаптивных сайтов является функция calс, применяемая в css.

Для Safari необходимо использовать свойство: -webkit-calc.

Например, если вы напишите такое свойство для элемента:

то это будет означать, что ширина элемента должна быть 100% от ширины родительского элемента минус 100px.

В функции могут использоваться следующие операторы:

+ — сложение;
— — вычитание;
* — умножение;
/ — деление.

При этом знаки плюс и минус должны обрамляться пробелами с обеих сторон.

В выражениях допускается смешивание различных величин, таких как:

  • размеров cm, mm, in, pt, pc, px;
  • углов deg, grad, rad, turn;
  • времени s, ms;
  • частот Hz, kHz;
  • простых численных значений.

Вычисления осуществляются с соблюдением правил приоритета операторов. С помощью скобок вы можете задавать свои приоритеты.

Например, нам нужно создать 2 вертикальные колонки, которые вместе занимали бы 100% родительской области с отступом между ними в 10px. Левая колонка должна занимать 70% от общей ширины, а правая — 30%.

С помощью функции calc это делается очень просто. Присвоим левой колонке класс col1, а правой col2, и пропишем для них стили:

Фактически мы сделали, что левая колонка равна 70% — 10px. В результате получится так:

Колонка шириной 70% — 20px
Колонка шириной 30%

Функция calc поддерживается почти всеми браузерами, то есть подходит и для кроссбраузерной верстки.

Добавьте комментарий