• Заметки
    •

    Единицы измерения px, %, em, rem, fr и другие

    Меню

    Отредактировано: 20 Мая 2018

    px

    Пиксель — базовая единица измерения, в которую в итоге пересчитываются все значения. Количество пикселей задаётся в настройках разрешения экрана.

    %

    Процентное соотношение, зависящее от ширины, высоты или размера шрифта родительского элемента. При position:fixed берется ширина, высота экрана. У применения % со свойством height и min-height есть свои особенности.

    em

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

    input[type=checkbox]+label>span{
margin-right: 1em;
width: 1em;
height: 1em;
}

    В этом примере размер и расстояния чекбокса будут зависеть от размера шрифта родителя.

    ex, ch

    Крайне редкие единицы, которые означают размер символа "x" и размер символа "0".

    rem

    Относительная единица, отчитывающаяся от размера шрифта элемента <html>. По умолчанию браузеры ставят вполне разумный размер, но для удобства счета, его можно переопределить под сочетание с px

    html { 
font-size:62.5%; 
-webkit-text-size-adjust:100%; 
-ms-text-size-adjust:100%;
}

    С этим правилом 1.4rem будет равняться 14px.

    vw, vh, vmin, vmax

    • vw – 1% ширины окна
    • vh – 1% высоты окна
    • vmin – наименьшее из (vw, vh), в IE9 обозначается vm
    • vmax – наибольшее из (vw, vh)

    Размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.

    fr

    Единица появившаяся для удобства работы с grid, обозначающая соотношение столбцов. Похожа на принцип подсчета пространства для Flexbox элементов. К примеру, 

    grid-template-columns: 1fr 1fr 1fr 1fr; — выдаст одинаковые столбцы,

    grid-template-columns: 300px 1fr .5fr 5fr; — браузер подсчитает размер пространства определенное под fr, и разделит на указанное значение. В данном случае, из общей ширины контейнера вычтится ширина статичных значений (300px), оставшаяся часть контейнера будет разделена на 6.5 частей (сумма указаных частей в значении) и поделена между столбцами соответственно указанным размерам.

    Канули в лету

    • 1mm (мм) = 3.8px
    • 1cm (см) = 38px
    • 1pt (типографский пункт) = 4/3 px
    • 1pc (типографская пика) = 16px
    front-end
    ?

    Благодарю за ответ!

    Была ли эта информация полезной?

    Здравствуйте!

    Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

    Инсталента