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

Есть много свойств в CSS, которые принимают длину в качестве значения. Свойства в таблице разметки CSS для блоков являются очевидными: width, height, margin, padding. Единицы измерения применяются не только для разметки, но и для: смещение тени, размер и расстояние шрифтов, толщина границ и т.д. Вот какие единицы измерения длины и расстояния применяются в CSS. Их довольно много.

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

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

px



.wrap {
  width: 400px; 
}


Значение, которое нормировано для различных устройств и дисплеев.

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

in



.wrap {
  width: 4in; 
}


Дюймы физическое измерение для CSS. Я один раз видел практическое использование дюймов для физических измерений в CSS.



1in == 96px


cm



.wrap {
  width: 20cm; 
}


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



1cm == 37.8px


mm



.wrap {
  width: 200mm; 
}


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



1mm == 0.1cm == 3.78px


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

Em



.wrap {
  width: 40em; 
}


Подробней об этой единице измерения длины в CSS, смотрите запись:  Размеры шрифта в CSS3

Соотношения для CSS:



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


Rem



.wrap {
  width: 40rem; 
}


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

Известные проблемы поддержки браузеров:  не работает в IE 8, Safari 4 или IOS 3.2. поэтому делаем резерв в px . Подробней об этой единице измерения длины в CSS, смотрите запись:  Размеры шрифта в CSS3

Points



.wrap {
  width: 120pt; 
}


Дело в том, физическое измерение равно 1/72 дюйма. Points является наиболее распространенным типом размера за пределами CSS (возможно, поэтому он имеет поддержку и в CSS).

Points лучше всего подходят для физических носителей, но ничто не мешает вам использовать pt для screen media.

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 в процентах

vw



.wrap {
  width: 10vw;
}


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

Известные проблемы поддержки браузеров:  Нет поддержки в любых мобильных браузерах, кроме самой последней IOS 6.

vh



.wrap {
  width: 10vh;
}


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

vmin



.wrap {
  width: 20vmin;
}


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

Подробней об этой единице измерения длины в CSS, смотрите запись:  Размеры шрифта в CSS3

vmax



.wrap {
  width: 20vmax;
}


Это значение будет в зависимости от того какой  larger  на данный момент, vm или vh. Подробней об этой единице измерения длины в CSS, смотрите запись:  Размеры шрифта в CSS3

Известные проблемы поддержки браузеров:  WebKit браузеры поддерживают только Vmin, а не Vmax (пока).

Круглое колесо

Процент



.wrap {
  width: 50%; 
}


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

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

Что бы работало в вашем браузере

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



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


js код



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");


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>