Относительные и абсолютные единицы измерения, использующиеся в CSS
http://belarusweb.net
Основы создания сайтов

Единицы измерения, использующиеся в CSS.

Два вида единиц измерения

Многие свойства CSS принимают в качестве своих значений числа, которые задают размеры соответствующих html-элементов. Например, довольно часто возникает необходимость указания ширины или высоты блочных элементов, величины внутренних и внешних отступов, межстрочного интервала и расстояния между соседними буквами, размера шрифта, ширины полей форм или ячеек таблицы, толщины границ и т.д. И все это в свою очередь приводит к необходимости использования соответствующих единиц измерения этих величин.

Выделяют два вида единиц измерения: абсолютные, которые являются фиксированными и не зависят от устройства вывода, а также относительные, величина которых зависит от какого-нибудь исходного размера, например, размера шрифта родительского элемента.

Абсолютные единицы измерения

К абсолютным единицам измерения относятся:

  • cm (от англ. centimeterсантиметр),
  • mm (от англ. millimeterмиллиметр),
  • in (от англ. inchдюйм) – один дюйм равен 2,54cm,
  • pt (от англ. pointпункт) – один пункт равен 1/72 дюйма или 0,353mm,
  • pc (от англ. picaпика) – одна пика равна 12 пунктам.

Абсолютные единицы используются в основном для стилей, которые используются при выводе текста html-документов на печатные носители информации. Пункты, кроме того, широко применяются в текстовых редакторах. Использование абсолютных единиц показано в примере 1.28.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Абсолютные единицы измерения</title>
	<style>
		.cm{font-size: 1cm;}
		.mm{font-size: 5mm;}
		.in{font-size: 0.5in;}
		.pt{font-size: 12pt;}
		.pc{font-size: 1pc;}
	</style>
</head>
<body>
	<span class="cm">Один сантиметр.</span><br>
	<span class="mm">Пять миллиметров.</span><br>
	<span class="in">Половина дюйма.</span><br>
	<span class="pt">12 пунктов.</span><br>
	<span class="pc">Одна пика (12 пунктов).</span>
</body>
</html>

Пример 1.1. Применение абсолютных единиц измерения

Относительные единицы измерения

Для вывода информации на экран в основном используются относительные единицы измерения, к которым относятся (см. примеры 1.2 и 1.3):

  • px (от англ. pixelпиксель) – 1px представляет собой одну элементарную точку на экране, размеры которой зависят от технических характеристик устройства вывода, например, размеров зерна монитора или экрана смартфона, а также заданного разрешения экрана, например, квадрат со стороной в 100px будет иметь различную длину сторон в миллиметрах, если на одном и том же экране монитора установить сначала разрешение 1366х768 пикселей, а затем изменить на 800х600 пикселей, т.к. при этом браузер станет выделять под один пиксель больше места (зерен экрана);
  • em1em равен высоте (размеру) текущего шрифта родительского элемента, например, если размер шрифта родительского элемента равен 15px, а размер шрифта текущего элемента указан как 2еm, то абсолютный размер шрифта текущего элемента составит 30px; недостатком данной единицы измерения является зависимость от размеров шрифтов всех его родительских элементов, что в итоге может привести к определенным трудностям в расчетах и неточностям в вычислениях;
  • rem (от англ. root em) – 1rem равен высоте (размеру) шрифта корневого элемента, т.е. самого элемента 'html', от которого шрифт наследуется телом документа 'body'; данная единица измерения обладает преимуществами перед единицами em и процентами, т.к. рассчитывается на основе размера шрифта только у одного элемента 'body' и не зависит от размеров шрифтов других родительских элементов;
  • % – определяет величину свойства текущего элемента в процентах от величины такого же свойства родительского элемента, например, если ширина родительского блока равна 100mm, а ширина текущего элемента задана как 150%, то его реальная ширина составит 150mm;
  • ex1ex равен высоте символа 'x' в нижнем регистре текущего шрифта элемента, используется редко;
  • ch1ch равен ширине символа '0' (ноль) текущего шрифта элемента, используется редко;
<!DOCTYPE html>

<!-- Зададим размер шрифта для документа -->
<html style="font-size: 16px;">
<head>
	<meta charset="utf-8">	
	<title>Относительные единицы измерения</title>
	<style>
		.px{font-size: 10px;}
		.em{font-size: 1.0em;}
		.rem{font-size: 1.0rem;}
		.percent{font-size: 100%;}
		.ex{font-size: 2ex;}
		.ch{font-size: 2ch;}
	</style>
</head>
<body>
	<!-- Переопределим размер шрифта для абзаца -->
	<p style="font-size: 24px;">
		<!-- Пиксели можно отнести и к абсолютным единицам шрифта -->
		<span class="px">10 пикселей.</span><br>
		
		<!-- Расчет ведется относительно шрифта элемента 'html' -->
		<span class="rem">1.0rem или 16*1.0=16 пикселей.</span><br>
		
		<!-- Расчет ведется относительно шрифта абзаца -->
		<span class="em">1.0em или 24*1.0=24 пикселя.</span><br>
		<span class="percent">100% равно 24 пикселям. Символы 'x', '0'.</span>
		
		<!-- Расчет ведется относительно символов 'x', '0' шрифта абзаца -->
		<br><span class="ex">2ex.</span><br>
		<span class="ch">2ch.</span>
	</p>
</body>
</html>

Пример 1.2. Применение относительных единиц px, em, rem, %, ex, ch

  • vw (от англ. view width) – 1vw равен 1% от ширины области просмотра окна браузера; данная единица позволяет масштабировать размеры элемента на лету в зависимости от ширины области просмотра, что особенно удобно для экранов планшетов и смартфонов;
  • vh (от англ. view height) – 1vh равен 1% от высоты области просмотра окна браузера; данная единица позволяет масштабировать размеры элемента на лету в зависимости от высоты области просмотра, что особенно удобно для экранов планшетов и смартфонов;
  • vmin1vmin равен 1% от минимального значения ширины или высоты области просмотра, т.е., если в данный момент ширина области просмотра окна браузера меньше высоты области просмотра, то будет взят 1% от ширины; можно сказать, что 1vmin равен 1vh или 1vw в зависимости от того, что меньше в данный момент;
  • vmax1vmax равен 1% от высоты максимального значения ширины или высоты области просмотра, т.е., если в данный момент ширина области просмотра окна браузера больше высоты области просмотра, то будет взят 1% от ширины; можно сказать, что 1vmin равен 1vh или 1vw в зависимости от того, какая величина больше в данный момент.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Относительные единицы измерения</title>
	<style>
		.vw{font-size: 5vw;}
		.vh{font-size: 5vh;}
		.vmin{font-size: 5vmin;}
		.vmax{font-size: 5vmax}
	</style>
</head>
<body>
	<span class="vw">5% в зависимости от ширины области просмотра.</span>
	<br>
	<span class="vh">5% в зависимости от высоты области просмотра.</span>
	<br>
	<span class="vmin">5% в зависимости от того, что меньше.</span>
	<br>
	<span class="vmax">5% в зависимости от того, что больше.</span>
</body>
</html>

Пример 1.3. Применение относительных единиц vw, vh, vmin, vmax

Теперь хотелось бы отметить, что значения единиц измерения не обязательно должны быть целыми. Если необходимо, то можно применять и десятичные дроби, а некоторые свойства, например, p {margin: -3px;}, даже позволяют применять отрицательные значения. Однако запись самих единиц измерения после значения обязательна, при чем пробела между числом и единицей измерения быть не должно.

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!