Единицы в CSS

View more Tutorials:

1- Единицы измерения (Units)

CSS предоставляет разные единицы измерения (Unit) для представления длины, некоторые из них имеют историю от  Topography (топографическое измерение), например  PT (Point) и PC (Pica), некоторые другие знакомые единицы, такие как CM (Centimeter), IN (Inch),...
Любая единица измерения в  CSS может быть использована для любого свойства (property) связанного с длиной, размером, как  CSS font-size, width, height,... Но есть некоторые рекомендации для вашего использования:

Rec­om­mended
(Рекомендуется)
Oc­ca­sional use
(Для постоянного использования)
Not rec­om­mended
(Не рекомендуется)
Screen
(Экран)
em, px, % ex pt, cm, mm, in, pc
Print
(Печать)
em, cm, mm, in, pt, pc, % px, ex
Примечание: Есть некоторые единицы, которые на данный момент в процессе тестирования, поэтому многие браузеры не поддерживают. Вам нужно быть осторожным при их использовании.
В основном, единицы измерения делятся на 2 вида: Единица абслютной длины и единица относительной длины.

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, которая требует дополнительные объяснения. 

2.1- Pixel (Px)

В цифровом изображении (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):
Смотрите так же:
  • TODO Link!

3- Относительные единицы длины

Относительные единицы длины (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.

3.1- EM

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,..

3.2- REM

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,..

3.3- EX

EX это относительная единица, имеет значение равное  x-height шрифта текущего элемента.

3.4- CH

EX это относительная единица . Это ширина глифа (glyph) "0" шрифта текущего элемента.

3.5- LH

LH это относительная единица, 1LH имеет значение раное  line-height текущего шрифта.
** Это единица измерения в процессе тестирования, поэтому не имеется поддерживающего браузера.
line-height определяет расстояние между базовой линией (baseline) двух строк. Базовая линия это в конце почти всех букв.

3.6- VW, VH

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>

3.7- VMIN, VMAX

VMin

VMIN это аббревиатура  Viewport Minimum, VMIN является минимальным значением среди 2-х значений  VW и VH.

VMax

VMAX это аббревиатура  Viewport Maximum, VMAX это максимальное значение среди 2-х значений  VW и VH.

View more Tutorials: