belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

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

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

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

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

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

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

    <!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 пикселей, т.к. при этом браузер станет выделять под один пиксель больше места (зерен экрана);
- em – 1em равен высоте (размеру) текущего шрифта родительского элемента, например, если размер шрифта родительского элемента равен 15px, а размер шрифта текущего элемента указан как 2еm, то абсолютный размер шрифта текущего элемента составит 30px; недостатком данной единицы измерения является зависимость от размеров шрифтов всех его родительских элементов, что в итоге может привести к определенным трудностям в расчетах и неточностям в вычислениях;
- rem (от англ. root em) – 1rem равен высоте (размеру) шрифта корневого элемента, т.е. самого элемента 'html', от которого шрифт наследуется телом документа 'body'; данная единица измерения обладает преимуществами перед единицами em и процентами, т.к. рассчитывается на основе размера шрифта только у одного элемента 'body' и не зависит от размеров шрифтов других родительских элементов;
- % – определяет величину свойства текущего элемента в процентах от величины такого же свойства родительского элемента, например, если ширина родительского блока равна 100mm, а ширина текущего элемента задана как 150%, то его реальная ширина составит 150mm;
- ex – 1ex равен высоте символа 'x' в нижнем регистре текущего шрифта элемента, используется редко;
- ch – 1ch равен ширине символа '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% от высоты области просмотра окна браузера; данная единица позволяет масштабировать размеры элемента на лету в зависимости от высоты области просмотра, что особенно удобно для экранов планшетов и смартфонов;
- vmin – 1vmin равен 1% от минимального значения ширины или высоты области просмотра, т.е., если в данный момент ширина области просмотра окна браузера меньше высоты области просмотра, то будет взят 1% от ширины; можно сказать, что 1vmin равен 1vh или 1vw в зависимости от того, что меньше в данный момент;
- vmax – 1vmax равен 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;}, даже позволяют применять отрицательные значения. Однако запись самих единиц измерения после значения обязательна, при чем пробела между числом и единицей измерения быть не должно.

belarusweb.net © Петр Романовский, Минск, 2016.