Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры
Приветствую Вас, уважаемые читатели блога webcodius! Для задания размеров различных элементов html страницы, в CSS существуют единицы измерения. Причем могут использоваться как относительные, так и абсолютные единицы.
Абсолютные единицы связаны с физическим миром и не зависят от устройства вывода. Для их указания можно использовать следующие единицы:
| Единица | Описание |
|---|---|
| mm | Миллиметр |
| cm | Сантиметр (равен 10mm) |
| in | Дюйм (равен 2,54cm) |
| pt | Пункт (равен 1/72in) |
| pc | Пика (равна 12pt) |
Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Абсолютные единицы</title>
<style type="text/css">
.mm { font-size: 8mm; }
.cm { font-size: 1cm; }
.in { font-size: 1in; }
.pt { font-size: 24pt; }
.pc { font-size: 1pc; }
</style>
</head>
<body>
<p class="mm">Размер 12 миллиметров</p>
<p class="cm">Размер 1 сантиметр</p>
<p class="in">Размер 1 дюйм</p>
<p class="pt">Размер 24 пункта</p>
<p class="pc">Размер 1 пика</p>
</body>
</html>
Результат:
Относительные единицы измерения
Для отображения информации на мониторе лучше использовать относительные единицы измерения. Так как физический размер точек (пикселей), образующих изображения на мониторе, может быть разным в зависимости от типа и физического размера этого самого монитора. Также размер пикселя зависит от установленного разрешения экрана. Основные относительные единицы:
| Единица | Описание |
|---|---|
| px | Пиксел |
| % | Процент |
| em | Высота шрифта родительского элемента |
| ex | Высота символа x |
1 px в CSS, как мы уже говорили выше, это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность.
При указании процентов размер вычисляется в зависимости от размера родительского элемента. Так, например если ширина родительского элемента 500px, то при указании width:50% ширина элемента будет 250px.
em привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. А ex это высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. То есть em также привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. Примеры:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Относительные единицы</title>
<style type="text/css">
.px { font-size: 20px; }
.percent { font-size: 150%; }
.em { font-size: 2em; }
.ex { font-size: 2ex; }
</style>
</head>
<body>
<p class="px">Размер 20 пикселов</p>
<p class="percent">Размер 150%</p>
<p class="em">Размер 2 em</p>
<p class="ex">Размер 2 ex</p>
</body>
</html>
Результат:
Кроме вышеперечисленных, есть группа относительных единиц привязанных к размеру области просмотра браузера:
| Единица | Описание |
|---|---|
| vw | 1% от ширины области просмотра |
| vh | 1% от высоты области просмотра |
| vmin | 1% от меньшего значения из ширины и высоты области просмотра |
| vmax | 1% от большего значения из ширины и высоты области просмотра |
Примеры использования:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Относительные единицы</title>
<style type="text/css">
.vw { font-size: 2vw; }
.vh { font-size: 2vh; }
.vmin { font-size: 2vmin; }
.vmax { font-size: 2vmax; }
</style>
</head>
<body>
<p class="vw">Размер 2 vw</p>
<p class="vh">Размер 2 vh</p>
<p class="vmin">Размер 2 vmin</p>
<p class="vmax">Размер 2 vmax</p>
</body>
</html>
Функция calc ()
Используется для указания вычисляемого значения свойств CSS, которые в качестве значения используют какое-либо число. В первую очередь calc можно применять для вычисления размеров, уголов, времени. Причем функция позволяет смешивать различные единицы измерений, например ширину div-а можно задать так:
div {
width: calc (100% — 40px);
}
В этом случае ширина div-а будет равно ширине родительского элемента минус 40 пикселей.
В выражениях можно использовать следующие арифметические действия:
- + — сложение. Символ отделяется пробелами с двух сторон (height: calc (20% + 50px));
- — — вычитание. Символ отделяется пробелами с двух сторон (width: calc (90% — 10px););
- * — умножение (padding: calc (2em*2););
- / — деление. На ноль делить запрещено (width: calc (100%/4);).
В браузерах Firefox до версии 16.0 поддерживается функция -moz-calc, в Chrome до версии 26.0 и в Safari с версии 6.0 поддерживается -webkit-calc.
Например, нам необходимо в резиновом двухколоночном макете сайта сделать так, чтобы между колонками при любом размере окна браузера было расстояние 50px. Тогда с помощью функции calc это делается следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Функция calc</title>
<style type="text/css">
html, body{
height: 100%;
}
#element1, #element2{
float: left;
width: -webkit-calc (100%/2 — 25px);
width: -moz-calc (100%/2 — 25px);
width: calc (100%/2 — 25px);
height: 100%;
background-color: #faf;
}
#element2{
margin-left: 50px;
}
</style>
</head>
<body>
<div id="element1"></div>
<div id="element2"></div>
</body>
</html>
(2 оценок, среднее: 5,00 из 5)
Loading...
Оставить комментарий