Единицы измерения

Единицы измерения в CSS

Edinicyi izmereniya
  Для того, чтобы в CSS определить размеры шрифтов, изображений, таблиц и их ячеек, а также других объектов используются определённые единицы измерения. Они могут иметь как абсолютные значения, то есть раз и навсегда заданного размера - это Абсолютные единицы измерения, так и относительные значения, которые всегда должны соотноситься с каким-либо основным размером и представляют из себя какую-то его часть - это Относительные единицы измерения.

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

  Абсолютные единицы не зависят от устройства вывода.
К абсолютным единицам относятся:
  • in - дюймы, 1 in = 25,4 mm;
  • cm - сантиметры;
  • mm - миллиметры;
  • pt - пункты (типографский пункт), 1 pt = 1/72 in = 0,353 mm;
  • pc - пики (типографская пика), 1 pc = 12 pt = 4,236 mm.
  HTML-код     CSS-код  
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="in">Шрифт 0,2 дюйма</p>
<p class="cm">Шрифт 0,5 сантиметра</p>
<p class="mm">Шрифт 5 миллиметров</p>
<p class="pt">>Шрифт 15 пунктов</p>
<p class="pc">Шрифт 1,2 пика</p>
<body>
</html> 		p .in {
font-size: 0.2in;
}
p .cm {
font-size: 0.5cm;
}
p .mm {
font-size: 5mm;
}
p .pt {
font-size: 15pt;
}
p .pc {
font-size: 1.2pc;
}
Что получилось
Шрифт 0,2 дюйма
Шрифт 0,5 сантиметра
Шрифт 5 миллиметров
Шрифт 15 пунктов
Шрифт 1,2 пика

  Абсолютные единицы измерения для указания размеров на страницах сайтов используются крайне редко.

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

  Относительные единицы указывают размер относительно другого размера, зависят от устройства вывода.
К относительным единицам относятся:
  • px – пикселы - размер точки на экране;
  • % – проценты;
  • em – высота шрифта;
  • ex – высота символа "x";
  • ch – высота символа ноль "0";
  • rem – смесь px и em;
  • vw – 1% ширины окна;
  • vh – 1% высоты окна;
  • vmax – наибольшее из vw и vh;
  • vmin – наименьшее из vw и vh;
  • vm – так для IE9 обозначается vmax.
  HTML-код    CSS-код  
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="em">Шрифт 2 em</p>
<p class="ex">Шрифт 4 ex</p>
<p class="px">Шрифт 22 пиксела</p>
<p class="percent">Шрифт 200 процентов</p>
<body>
</html> 		p .em {
font-size: 2em;
}
p .ex {
font-size: 4ex;
}
p .px {
font-size: 22px;
}
p .percent {
font-size: 200%;
}
Что получилось
Шрифт 2 em
Шрифт 4 ex
Шрифт 22 пиксела
Шрифт 200 процентов

  Чаще всего, чтобы меньше путаться, для задания размеров принимают относительные единицы - пикселы (px) и проценты (%), реже высоту шрифта (em).