Если озвучить основное изменение в верстке сайтов последних лет, то это будет переход от фиксированных макетов к адаптивным, способным подстраиваться под любой размер воспроизводящего устройства.
Одним из удобных инструментов для построения адаптивных сайтов является функция calс, применяемая в css.
Для Safari необходимо использовать свойство: -webkit-calc.
Например, если вы напишите такое свойство для элемента:
|
1 |
width: calc(100% - 100px); |
то это будет означать, что ширина элемента должна быть 100% от ширины родительского элемента минус 100px.
В функции могут использоваться следующие операторы:
+ — сложение;
— — вычитание;
* — умножение;
/ — деление.
При этом знаки плюс и минус должны обрамляться пробелами с обеих сторон.
В выражениях допускается смешивание различных величин, таких как:
- размеров cm, mm, in, pt, pc, px;
- углов deg, grad, rad, turn;
- времени s, ms;
- частот Hz, kHz;
- простых численных значений.
Вычисления осуществляются с соблюдением правил приоритета операторов. С помощью скобок вы можете задавать свои приоритеты.
Например, нам нужно создать 2 вертикальные колонки, которые вместе занимали бы 100% родительской области с отступом между ними в 10px. Левая колонка должна занимать 70% от общей ширины, а правая — 30%.
С помощью функции calc это делается очень просто. Присвоим левой колонке класс col1, а правой col2, и пропишем для них стили:
|
1 2 3 4 5 6 7 8 9 10 |
.col1 { width: calc(70% - 10px); float: left; background-color: red; } .col2 { width: 30%; float: right; background-color: blue; } |
Фактически мы сделали, что левая колонка равна 70% — 10px. В результате получится так:
Функция calc поддерживается почти всеми браузерами, то есть подходит и для кроссбраузерной верстки.
