Фаллбеки
Если у вас всё-таки старенький браузер, который не поддерживает calc, используйте фаллбечные свойства:
.box {
width: 90%; /* применит это свойство, если браузер не поддерживает calc */
width: calc(100% - 3em);
}Стили для сетки страницы
Намного удобней описывать размеры колонок сайта с помощью calc():
.col-7 { width: calc(100% / 7); } /* эквивалентно 14,2857% */
.col-6 { width: calc(100% / 6); } /* эквивалентно 16,6666% */
.col-5 { width: calc(100% / 5); } /* эквивалентно 20% */
.col-4 { width: calc(100% / 4); } /* эквивалентно 25% */Значения при таком подходе будут более точными и понятными для чтения.
Вычисления относительно высоты экрана
Допустим у вас шаблон, в котором есть хэдер и главный блок, но в нём ничего нет. Чтобы он заполнил пространство окна, одним из способов может быть использование calc():
<body>
<header></header>
<main></main>
</body>header {
height: 80px;
}
main {
min-height: calc(100vh - 80px);
}Такой же подход может подойти для случая с модальным окном, в котором нужно предусмотреть скролл для ситуации, когда его содержания будет не хватать на всю высоту экрана:
<body>
<header></header>
<main></main>
<div class="modal"></div>
</body>header {
height: 80px;
}
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 600px;
max-height: calc(100vh - 80px * 2); /* отступы по 80px для видимости хэдера */
overflow-y: auto;
}Положение фоновой картинки
Мы знаем как спозиционировать фоновую картинку относительно левого верхнего угла. Обычно достаточо этого:
background-image: url(image.png);
background-position: 50px 20px;Но что, если мы хотим спозиционировать картинку относительно правого нижнего угла? Это возможно средствами calc():
background-image: url(image.png);
background-position: calc(100% - 50px) calc(100% - 20px);Замена медиа-выражениям
Вот пример, в котором у нас элементы при ширине экрана выше 600px будут выстраиваться в две колонки, а при меньшей - в одну:
.block {
min-width: 50%;
max-width: 100%;
display: inline-block;
width: calc((600px - 100%) * 600);
}Свойство min-width определяет ширину наших столбцов для "десктопной версии экрана". Мы можем изменить это значение, чтобы добавить больше столбцов (например 25% для макета из четырех столбцов) или вообще установить фиксированную ширину в пикселях.
Свойство max-width определяет ширину столбцов для нашей "мобильной версии". При 100% каждый столбец будет адаптироваться к полной ширине родительского контейнера. Мы также можем изменить это значение (например, указать 50% для макета из двух столбцов).
Благодаря функции calc() в свойстве width происходит волшебство. Значение 600 соответствует желаемому значению точки брейкпоинта и цель этого вычисления - создать значение больше, чем наша максимальная ширина, или меньше, чем наша минимальная ширина, чтобы вместо этого применялось одно из этих свойств.
При ширине 700px вычисленное значение будет отрицательным, а значит победит свойство min-width и мы увидим две колонки.
При ширине 500px вычисленное значение будет больше чем 600px, а значит победит свойство max-width и мы увидим, что все блоки выстраиваются в одну колонку.
