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

Полный список с описанием всех существующих Единицы измерения в CSS.

Оглавление:
  1. Единицы измерения длины и расстояния
  2. Абсолютная длина
  3. px
  4. in
  5. cm
  6. mm
  7. Относительные единицы измерения
  8. Em
  9. Rem
  10. Points
  11. Pica
  12. ex
  13. ch
  14. Длина Viewport
  15. vw
  16. vh
  17. vmin
  18. vmax
  19. Процент
  20. Для браузеров

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Единицы измерения длины и расстояния

Единицы измерения применяются для смещения тени, размер и расстояние шрифтов, толщина границ и т.д. Вот какие единицы измерения длины и расстояния применяются в CSS. Их довольно много.

Абсолютная длина

Единицы измерения для разных устройств и дисплеев.

px

.wrap {
  width: 400px; 
}

Пиксель всё еще каноническое измерение в интернете, даже JavaScript обрабатываются в пикселях.

in

.wrap {
  width: 4in; 
}

Практическое использование дюймов для измерений в CSS.

1in == 96px

cm

.wrap {
  width: 20cm; 
}

Сантиметры больше знакомы и полезны в качестве физических измерений. Но в CSS они также просто контейнер для пикселей:

1cm == 37.8px

mm

.wrap {
  width: 200mm; 
}

Расстояние в десять раз меньше …

1mm == 0.1cm == 3.78px

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

Относительные единицы измерения указывают значение длины относительно других единиц измерения.

Em

.wrap {
  width: 40em; 
}

Соотношения:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

Rem

.wrap {
  width: 40rem; 
}

Как и em, но rem всегда относится к корневому элементу (т.е.. :root {}), и не с помощью каскада, как это делает em . Это значительно упрощает работу с относительными единицами измерения длины и расстояния. Rem помогает при адаптивном дизайне.

у Rem проблемы с поддержкой, не работает в IE 8, Safari 4 или IOS 3.2. поэтому делаем резерв в px.

Points

.wrap {
  width: 120pt; 
}

Points наиболее распространен за пределами CSS. Points лучше всего подходят для физических носителей.

Pica

.wrap {
  width: 12pc; 
}

Та же история как с points, только: 1pc == 12pt.

ex

.wrap {
  width: 60ex;
}

Это измерение на основе x-height текущего шрифта. Иногда информация поступает в браузер из самого шрифта, и браузер понимает это путем измерения символа нижнего регистра, и в худшем случае, он устанавливается в 0.5em. Это называется x-height потому что он основан по высоте x.

В отличие от em, которые не изменяются при изменении семейств шрифтов, экс единица действительно измениться при изменении семейства шрифта, а свойство одной единицы специально связано для шрифта.

К началу

ch

.wrap {
  width: 60ch;
}

Это похоже на x-height, только канал основан в ширину, ноль (0) вместо высоты символа х. Он также изменяет семейство шрифтов.

Длина Viewport

Длина Viewport для настройки разметки.

vw

.wrap {
  width: 10vw;
}

Это ширина окна блока. 1vw равна 1% от ширины окна просмотра. vw похож на проценты, за исключением того что значение остаётся для всех элементов независимо от их родительских элементов или ширины родительских элементов. Похож на rem, тем что всегда относителен к корню.

у vw проблемы с поддержкой, работает в IOS 6+.

vh

.wrap {
  width: 10vh;
}

Это так же, как vw (ширина окна) блока, основан только на высоту просмотра.

vmin

.wrap {
  width: 20vmin;
}

Это значение будет в зависимости от того какой smaller в данный момент, vm или vh. В стандартном случае использования типов размеров, может быть более полезен чем vm или vh в определении истинного размера экрана.

vmax

.wrap {
  width: 20vmax;
}

Это значение будет в зависимости от того какой larger на данный момент, vm или vh.
у vmax проблемы с поддержкой, WebKit браузеры поддерживают только Vmin, а не Vmax (пока).

Процент

.wrap {
  width: 50%; 
}

Длина указывается в процентах, основано на длине свойств родительского элемента. Например если родительский элемент шириной 450px, дочерний элемент с шириной ​​50%, значит размер дочернего элемента будет в половину меньше родительского элемента = 225px.

Общая информация: процент технически не является единицей длины и расстояния, но процент связаны с этой темой.

Для браузеров

Не все браузеры понимают перечисленные единицы измерения.
HTML

<div id="percentage">50% - percentage</div>
<div id="pixel">400px - pixels (device pixels)</div>
<div id="em">20em - relative unit</div>
<div id="rem">20rem - root em</div>
<div id="vw">15vw - viewport width</div>
<div id="vh">60vh - viewport height</div>
<div id="vmin">60vmin - smaller of vw or vh</div>
<div id="vmax">60vmax - larger of vw or vh</div>
<div id="inch">4in - inches</div>
<div id="cm">20cm - centimeters</div>
<div id="mm">200mm - millimeters</div>
<div id="pt">120pt - points</div>
<div id="pc">40pc - picas</div>
<div id="ex">60ex - x-height</div>
<div id="ch">60ch - based on width of zero (0) character</div>

JavaScript для браузеров которые не понимают перечисленные единицы измерения.

var percentage = $("#percentage").css("width", "50%");
if (percentage.width() == 0) percentage.addClass("fail");

var pixel = $("#pixel").css("width", "400px");
if (pixel.width() == 0) pixel.addClass("fail");

var em = $("#em").css("width", "20em");
if (em.width() == 0) em.addClass("fail");

var rem = $("#rem").css("width", "20rem");
if (rem.width() == 0) rem.addClass("fail");

var vw = $("#vw").css("width", "15vw");
if (vw.width() == 0) vw.addClass("fail");

var vh = $("#vh").css("width", "60vh");
if (vh.width() == 0) vh.addClass("fail");

var vmin = $("#vmin").css("width", "60vmin");
if (vmin.width() == 0) vmin.addClass("fail");

var vmax = $("#vmax").css("width", "60vmax");
if (vmax.width() == 0) vmax.addClass("fail");

var inch = $("#inch").css("width", "4in");
if (inch.width() == 0) inch.addClass("fail");

var cm = $("#cm").css("width", "20cm");
if (cm.width() == 0) cm.addClass("fail");

var mm = $("#mm").css("width", "200mm");
if (mm.width() == 0) mm.addClass("fail");

var pt = $("#pt").css("width", "120pt");
if (pt.width() == 0) pt.addClass("fail");

var pc = $("#pc").css("width", "40pc");
if (pc.width() == 0) pc.addClass("fail");

var ex = $("#ex").css("width", "60ex");
if (ex.width() == 0) ex.addClass("fail");

var ch = $("#ch").css("width", "60ch");
if (ch.width() == 0) ch.addClass("fail");

После применения единиц, рекомендуется проверка их поддержки во всех браузерах.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)