Единицы в CSS
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
CSS предоставляет разные единицы измерения (Unit) для представления длины, некоторые из них имеют историю от Topography (топографическое измерение), например PT (Point) и PC (Pica), некоторые другие знакомые единицы, такие как CM (Centimeter), IN (Inch),...
Любая единица измерения в CSS может быть использована для любого свойства (property) связанного с длиной, размером, как CSS font-size, width, height,... Но есть некоторые рекомендации для вашего использования:
| Recommended (Рекомендуется) | Occasional use (Для постоянного использования) | Not recommended (Не рекомендуется) | |
|---|---|---|---|
| Screen (Экран) | em, px, % | ex | pt, cm, mm, in, pc |
| Print (Печать) | em, cm, mm, in, pt, pc, % | px, ex |
Примечание: Есть некоторые единицы, которые на данный момент в процессе тестирования, поэтому многие браузеры не поддерживают. Вам нужно быть осторожным при их использовании.
В основном, единицы измерения делятся на 2 вида: Единица абслютной длины и единица относительной длины.
Единица абсолютной длины часто используется в CSS, она поможет вам настроить точный размер.
| Unit | Name | Equivalent to |
|---|---|---|
| cm | Centimeters | 1cm = (1/2.54) of 1in |
| mm | Millimeters | 1mm = 1/10 of 1cm |
| Q | Quarter-millimeters | 1Q = 1/4 of 1mm |
| in | Inches | 1in = 2.54cm |
| pc | Picas | 1pc = 1/16 of 1in |
| pt | Points | 1pt = 1/72 of 1in |
| px | Pixels | Depends on the screen resolution |
В основном, все единицы измерения выше не сложно понять и не нужно много объяснений, кроме единицы Pixel, которая требует дополнительные объяснения.
В цифровом изображении (digital imaging), Pixel (Пиксель) является аббревиатурой фразы Picture Element, это физическая точка изображения Raster (Raster Image). Raster это техника создания изображения, разделив изображение на сетки маленьких квадратов, каждый квадрат имеет опредленный цвет и является минимальной едницей для создания цифрового изображения.
Чем больше имеется в одном Inch пикселей (pixel), тем яснее изображение. Единица Pixel не имеет определенного физического значения, она зависит от плотности пикселей (pixel density), или сказать по другому зависит от разрешения экрана (screen resolution) устройства.
Пиксели очень маленькие, поэтому вам сложно обнаружить квадраты, только если вы увеличите изображение.
Текущие распространенные экраны используют разрешение 96 DPI, это значит в одном Inch имеется 96 пикселей или в 1 Centimet имеется примерно 37.79 пикселей.
Ссылка ниже поможет вам конвертировать единицы INCH, CM в соответствующие PIXEL с разными разрешениями (resolution):
Смотрите так же:
Относительные единицы длины (relative length units) распространенно используютсяя в CSS, помогает вам настроить относительный размер по отношению к определенному элементу. Например вы хотите, чтобы размер шрифта дочернего элемента была в 2 раза больше, чем размер шрифта родительского элемента, используйте единицу EM.
.child {
font-size: 2em;
}
| Unit | Relative to (Отностительно к) |
|---|---|
| em | Размер шрифта родительского элемента. |
| rem | Размер шрифта коренного элемента (Элемент HTML) |
| ex | x-height шрифта элемента. |
| ch | Ширина глифа (glyph) "0" шрифта текущего элемента. |
| lh | line-height элемента. |
| vw | 1% ширины у Viewport. |
| vh | 1% высоты у Viewport. |
| vmin | Минимальное значение из 2-х значений: vw, vh. |
| vmax | Максимальное значение из 2-х значений: vw, vh. |
EM является относительной единицей, она используется во всех случаях, как в определении размера шрифта, длины,.., 1em является размер шрифта родительского элемента.
Например родительский элемент имеет размер шрифта: {font-size: 15px} и текущий элемент (дочерний элемент) имеет размер шрифта {font-size: 2em}, при этом 1em = 15px, то есть 2em = 30px.
Например родительский элемент имеет размер шрифта: {font-size: 15px}, текущий элемент (дочерний элемент) имеет ширину: {width: 10em}, при этом 1em = 15px, тогда 10em = 150px. Тогда текущий элемент будет иметь ширину 150px.
Пример размра шрифта с единицей длины EM:
unit-em-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS font-size</title>
<meta charset="UTF-8"/>
<style>
span {
font-size: 2em;
}
</style>
</head>
<body>
<h3>CSS font-size (Unit: em)</h3>
Default font size (Font size of body). <br/>
<span style="font-size: 11px;">
Span (1)
<span>
Span (1.1)
<span> Span (1.1.1)</span>
</span>
</span>
</body>
</html>
Например, используем единицу длины EM с font-size, padding, margin, width, height,..
REM это относительная единица длины. 1REM это размер шрифта корневого элемента (Root Element) - <HTML>.
Например корневой элемент (root element) HTML имеет размер шрифта: {font-size: 15px} и текущий элемент имеет размер шрифта {font-size: 2rem}, при этом 1rem = 15px, тогда 2rem = 30px.
Например родительский элемент имеет размер шрифта: {font-size: 15px}, текущий элемент (дочерний элемент) имеет ширину: {width: 10rem}, при этом 1rem = 15px, тогда 10rem = 150px. Тогда текущий элемент будет иметь ширину 150px.
Пример размера шрифта с единицей длины REM:
unit-rem-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS font-size</title>
<meta charset="UTF-8"/>
<style>
html {
font-size: 15px;
}
</style>
</head>
<body>
<h3>CSS font-size (Unit: rem)</h3>
Default font size (Font size of body). <br/><br/>
<span style="font-size: 2rem;">
Span (1)
<span style="font-size: 1rem;">
Span (1.1)
<span style="font-size: 2rem;"> Span (1.1.1)</span>
</span>
</span>
</body>
</html>
Пример использования единицы длины REM с font-size, padding, margin, width, height,..
EX это относительная единица, имеет значение равное x-height шрифта текущего элемента.
EX это относительная единица. Это ширина глифа (glyph) "0" шрифта текущего элемента.
LH это относительная единица, 1LH имеет значение раное line-height текущего шрифта.
** Это единица измерения в процессе тестирования, поэтому не имеется поддерживающего браузера.
line-height определяет расстояние между базовой линией (baseline) двух строк. Базовая линия это в конце почти всех букв.
VW
VW это аббревиатура Viewport Width, 1VW имеет значение 1% ширины у Viewport.
VH
VH эо аббревиатура Viewport Height, 1VH имеет значение 1% высоты Viewport.
Пример с VW, VH:
vw-vh-example.html
<!DOCTYPE html>
<html>
<head>
<title>Unit: VW, VH</title>
<meta charset="UTF-8"/>
<style>
.my-div {
width: 50VW;
height: 50VH;
padding: 5px;
background-color: #ddd;
}
</style>
</head>
<body>
<h3>Unit: VW, WH</h3>
<div class = "my-div">
{<br>
width:50vw; <br>
height: 50wh;<br>
}
</div>
</body>
</html>
VMin
VMIN это аббревиатура Viewport Minimum, VMIN является минимальным значением среди 2-х значений VW и VH.
VMax
VMAX это аббревиатура Viewport Maximum, VMAX это максимальное значение среди 2-х значений VW и VH.
*
