Многие свойства CSS имеют свои единицы измерения, рассматривать все в одной статье нет необходимости.
1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS - это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.
1 em = значению font-size родителя. Обратите внимание, что в полигоне ниже font-size жёлтого и коричневого блоков разный, а размер шрифта одинаковый.
16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 8px * 2 = 16px // коричневый
1 rem = значению font-size <html> (корневого элемента документа).
16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 16px * 2 = 32px // коричневый
1 процент (1%) — значение высчитывается относительно значения свойства родительского тега.
16px * 100% = 16px // жёлтый 16px * 50% = 8px // зелёный 8px * 200% = 16px // коричневый
При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.
1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
1vmin = 1vw или 1vh. Выбирается то, которое меньше.
1vmax = 1vw или 1vh. Выбирается то, которое больше.
<style>
#raz { font-size: 16px100%1em1vw1vh1vmin1vmax1rem; width: 150px17%9em10vw20vh20vmin10vmax9rem; height: 150px1000%9em10vw20vh20vmin10vmax9rem; }
#raz > div { font-size: 8px50%.5em.5vw.5vh.5vmin.5vmax.5rem; width: 100px67%12em7vw13vh13vmin7vmax6rem; height: 100px1000%12em7vw13vh13vmin7vmax6rem; }
#raz > div > div { font-size: 32px200%2em2vw2vh2vmin2vmax2rem; width: 250px249%15em17vw33vh33vmin17vmax15rem; height: 250px1000%15em17vw33vh33vmin17vmax15rem; }
</style>
<div id="raz">font-size: 16px100%1em1vw1vh1vmin1vmax1rem;
<div>font-size: 8px50%.5em.5vw.5vh.5vmin.5vmax.5rem;
<div>font-size: 32px200%2em2vw2vh2vmin2vmax2rem;</div>
</div>
</div>
Функция calc()
Никогда не хотелось от процентов вычесть пиксели или емы? Например, для того, чтобы кнопка "наверх" была как ВКонтакте и держалась точно по левому краю от содержания. Теперь это возможно. Функция calc() позволяет реализовать математические выражения
+ добавление (символ отделяется пробелами с двух сторон) - вычитание (символ отделяется пробелами с двух сторон) * умножение / деление
Вот ещё один зачётный пример, чтобы избежать ситуацию смещения пункта меню при наведении на него курсора мышки.
- 1
- 2
- 3
- 4
<style>
.skachet li {
display: inline-block;
width: -webkit-calc(25% - 1em); /* для Google Chome и Safari */
width: calc(25% - 1em);
text-align: center;
border: .5em solid blue;
}
.skachet li:hover {
border: .5em solid red;
}
</style>
<ul class="skachet">
<li>1
<li>2
<li>3
<li>4
</ul>
11 комментариев: