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

Единицы измерения CSS, размер шрифта

Обычный параграф на странице

Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.

Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента.

Результат нашего примера:

Рис.51 Пример использования процентных значений.

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

Первый параграф: 16px * 100% = 16px
Второй параграф: 16px * 50% = 8px
Третий параграф: 16px * 200% = 32px

При работе с процентными значениями обратите Ваше внимание на то, что все вложенные элементы наследуют значения и используют их для вычисления своих размеров шрифтов. Что это значит, разберем в примере:

Родительский div 12px Блок, к которому применен стиль с размером шрифта 200% от родительского элемента. Блок, который наследует значение

Результат нашего примера:

Рис.52 Пример наследования процентных значений.

В данном примере для вложенного блока с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок , для которого мы установили размер шрифта 12px.

Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

12px * 200% = 24px

Если бы мы не изменили значение размера шрифта для блока , то расчёт бы происходил исходя из базового шрифта:

16px(базовый размер шрифта) * 200% = 32px

Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы внутри элемента с классом doubleFontSize получат размер шрифта в два раза больше чем родительский.

Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

размер шрифта родительского элемента * 200% = 48px

Единица измерения еm

Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

Если вы внимательно отнеслись к изучению использования и наследования процентных значений, то вы быстро сможете освоить работу с такой единицей измерения как em.

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

Например:

базовый размер текста = 1em = 100%
базовый размер текста * 2 = 2em = 200%
базовый размер текста * 0.5 = 0.5em = 50%

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

font-size:0.8em

font-size:80%

font-size:1.5em

font-size:150%

font-size:1.8em

font-size:180%

Результат нашего примера:

Рис.53 Пример использования значений em.

Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

Единица измерения rеm

Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

Блок 1 Блок 2 Блок 3 Блок 4 Блок 5 Блок 6

В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25em.

Обратите внимание

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

Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂

Рис.54 Пример наследования значений em.

Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem.

Блок 1 Блок 2 Блок 3 Блок 4 Блок 5 Блок 6

В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25rem. В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.

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

Рис.55 Пример использования значений rem.

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

Единица измерения еx

Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.

В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

Единица измерения ch

Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа '0' (ноль, символ Юникода U+0030).

Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

.width50 {
width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */
}

Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

Масштабируемые величины относительно экрана

С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).

Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

  • 1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.
  • 1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.

Рассмотрим пример:

font-size: 5vw; width:100vw; height:30vh; font-size: 4vw; width:75vw; height:50vh; font-size: 3vw; width:50vw; height:20vh;

В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw, для третьего — 3vw), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw, для третьего — 50vw) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh, для третьего — 20vh).

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

Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов.

Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».

Результат нашего примера:

Рис.57 Масштабируемые единицы измерения.

Минимальное и максимальное значение области просмотра

Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:

  • 1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.
  • 1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

.viewportMin { . viewportMax { width: 40vmin; width: 40vmax; height: 40vmin; height: 40vmax; } }

viewportMin
w&h — 40vmin viewportMax
w&h — 40vmax

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0.

Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin.

Важно

Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%.

В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

400px (текущее минимальное значение viewport области просмотра) * 40% = 160px
Для высоты расчёт аналогичен: 400px (текущее минимальное значение viewport) * 40% = 160px.

В итоге мы получили «квадрат Малевича».

Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

Ширина — 700px(текущее максимальное значение viewport) * 40% = 280px.
Высота — 700px (текущее максимальное значение viewport) * 40% = 280px.

Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.

Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:

  1. Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax, iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия – некорректно работала единица измерения vh).
  2. Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
    • IE работает только с версии 9.0 (поддерживает значение vm, вместо vmin).
    • IE 10, IE 11 не поддерживают значение vmax.
    • Edge 12, 13, 14 не поддерживают значение vmax.

Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.

Например:

i {
font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов */
}

Читайте также:  Css сердца

Полный перечень возможных ключевых слов с расшифровкой размещен в следующей таблице:

ЗначениеОписание
medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger Устанавливает размер шрифта большего размера, чем у родительского элемента.

Рассмотрим пример использования ключевых слов на странице:

Блок с ключевым словом medium Блок с ключевым словом small Блок с ключевым словом x-small Блок с ключевым словом xx-small Блок с ключевым словом smaller Блок с ключевым словом large Блок с ключевым словом x-large Блок с ключевым словом xx-large Блок с ключевым словом larger

В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

Результат нашего примера:

Рис.59 Использование ключевых слов для управления размером шрифта.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

  • Практическое задание № 13У нас имеются следующие стили, в которых элемент и элементы , имеют размер шрифта 150%:
    body, div { /* создаем групповой селектор */
    font-size: 150%; /* устанавливает размер шрифта 150% */
    }
    Сделаем следующую разметку:
    Текст внутри тела документа Текст внутри блока Текст внутри вложенного блока

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока , вложенного в .
    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока , вложенного в другой блок .

    После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).

  • Практическое задание № 14
    У нас имеются следующие стили, в которых элемент и элементы , имеют размер шрифта 1.5em:
    body, div { /* создаем групповой селектор */
    font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */
    }
    Сделаем следующую разметку:
    Текст внутри тела документа Текст внутри блока Текст внутри вложенного блока

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока , вложенного в .
    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока , вложенного в другой блок .

    После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).

  • Практическое задание № 15
    У нас имеются следующие стили, в которых элемент и элементы , имеют размер шрифта 1.5rem:
    body, div { /* создаем групповой селектор */
    font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */
    }
    Сделаем следующую разметку:
    Текст внутри тела документа Текст внутри блока Текст внутри вложенного блока

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока , вложенного в .
    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока , вложенного в другой блок .

    После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).

Источник: https://basicweb.ru/css/css_edinici_izmereniya.php

Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры

       

Размер 12 миллиметров

    

Размер 1 сантиметр

    

Размер 1 дюйм

    

Размер 24 пункта

    

Размер 1 пика

  

Результат:

Посмотреть в браузере

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

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

ЕдиницаОписание
px Пиксел
% Процент
em Высота шрифта родительского элемента
ex Высота символа x

1 px в CSS, как мы уже говорили выше, это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность.
При указании процентов размер вычисляется в зависимости от размера родительского элемента. Так, например если ширина родительского элемента 500px, то при указании width:50% ширина элемента будет 250px.

em привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. А ex это высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. То есть em также привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. Примеры:

          

Размер 20 пикселов

    

Размер 150%

    

Размер 2 em

    

Размер 2 ex

  

Результат:

Посмотреть в браузере

Кроме вышеперечисленных, есть группа относительных единиц привязанных к размеру области просмотра браузера:

ЕдиницаОписание
vw 1% от ширины области просмотра
vh 1% от высоты области просмотра
vmin 1% от меньшего значения из ширины и высоты области просмотра
vmax 1% от большего значения из ширины и высоты области просмотра

Примеры использования:

          

Размер 2 vw

    

Размер 2 vh

    

Размер 2 vmin

    

Размер 2 vmax

  

Результат

Функция calc ()

Используется для указания вычисляемого значения свойств CSS, которые в качестве значения используют какое-либо число. В первую очередь calc можно применять для вычисления размеров, уголов, времени. Причем функция позволяет смешивать различные единицы измерений, например ширину div-а можно задать так:

div {   width: calc (100% — 40px);

}

В этом случае ширина div-а будет равно ширине родительского элемента минус 40 пикселей.

В выражениях можно использовать следующие арифметические действия:

  • + — сложение. Символ отделяется пробелами с двух сторон (height: calc (20% + 50px));
  • — — вычитание. Символ отделяется пробелами с двух сторон (width: calc (90% — 10px););
  • * — умножение (padding: calc (2em*2););
  • / — деление. На ноль делить запрещено (width: calc (100%/4);).

В браузерах Firefox до версии 16.0 поддерживается функция -moz-calc, в Chrome до версии 26.0 и в Safari с версии 6.0 поддерживается -webkit-calc.

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

Демо

(1

Источник: http://webcodius.ru/spravochnik-css/edinicy-izmereniya-css-pikseli-em-i-ex-i-funkciya-calc-primery.html

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

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

Абсолютные единицы

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.

.one-cm { font-size: 1cm; } .one-mm { font-size: 1mm; } .one-in { font-size: 1in; }

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.

.one-point { font-size: 1pt; } .one-pica { font-size: 1pc; }

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

К относительным единицам измерения относятся пиксели (px) и проценты (%). Процент — единица измерения, не имеющая напрямую никакого отношения к размеру шрифта в элементе или к размеру самого элемента.

Величина свойства, установленная в процентах, напрямую зависит от величины этого же свойства, установленного для родительского элемента.

Например, размер шрифта задается относительно размера шрифта родительского элемента, также высота и ширина выражается в процентах относительно высоты и ширины области содержимого родительского элемента.

.one-pixel { font-size: 1px; } .one-percent { font-size: 1%; }

Пиксель — точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране.

Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм.

В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em — высота текущего шрифта, ex — высота символа «х» в нижнем регистре указанного шрифта.

.one-ex { font-size: 1ex; } .one-em { font-size: 1em; }

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

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem — размер шрифта корневого элемента (), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.

.one-rem { font-size: 1rem; }

Совет

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.

00000

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.

width: 50vw; /* 50% от ширины области просмотра */ height: 25vh; /* 25% от высоты области просмотра */

Двумя дополнительными единицами являются vmin и vmax, которые задают минимальное или максимальное значение размера области просмотра.

width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */ height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше */

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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

p { font-size: 0.394in; } /* десятичная дробь */ p { margin: -1px; } /* отрицательное значение */

Обратите внимание, что объявление не будет работать, если перед единицей измерения стоит пробел, или если единица измерения не указана (за исключением нулевого значения). Если в качестве значения используется ноль, то указание единицы измерения можно опустить.

p { font-size: 1ex; } /* корректно */ p { font-size: 0; } /* корректно */ p { font-size: 0ex; } /* корректно */ p { font-size: 1 ex; } /* неправильно */ p { font-size: 1; } /* неправильно */

Всякий раз, когда CSS объявление содержит ошибку, оно игнорируется браузером, при этом остальные объявление продолжают работать.

Источник: https://puzzleweb.ru/css/css_units.php

Единицы измерения: «px», «em», «rem» и другие

В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333…px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

  • Главное достоинство пикселя – чёткость и понятность
  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории.

Вот, если интересно, их значения:

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

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

Страусы Живут также в Африке

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с em вместо px:

Страусы Живут также в Африке

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Обратите внимание

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0».

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0». В этом случае они носят более условный характер.

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты %, как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с %, он выглядит в точности так же, как с em:

Страусы Живут также в Африке

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-leftПри установке свойства margin-left в %, процент берётся от ширины родительского блока, а вовсе не от его margin-left.line-heightПри установке свойства line-height в %, процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства «font-size» и «line-height».width/heightДля width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства «height» в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px, ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и %.

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em.

Вроде бы, использовать можно, однако есть проблема.

Попробуем использовать этот подход для

  • .

    Протестируем на таком списке:

    • Собака
      • бывает
        • кусачей
          • только
            • от жизни
              • собачей

    Пока это обычный вложенный список.

    Теперь уменьшим размер шрифта до 0.8em, вот что получится:

    • Собака
      • бывает
        • кусачей
          • только
            • от жизни
              • собачей

    Проблема очевидна. Хотели, как лучше, а получилось… Мелковато. Каждый вложенный

  • получил размер шрифта 0.8 от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.

    Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей rem, которая, можно сказать, специально придумана для таких случаев!

    Единица rem задаёт размер относительно размера шрифта элемента .

    Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по-умолчанию, который мы, конечно, можем переопределить и использовать rem для задания шрифтов внутри относительно него:

    Кликните, чтобы увеличить размер шрифта

    • Собака
      • бывает
        • кусачей
          • только
            • от жизни
              • собачей

    Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.

    Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта .

    Единица rem не поддерживается в IE8-.

    Относительно экрана: vw, vh, vmin, vmax

    Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:

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

    Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.

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

    Этот текст написан с размером `5vh`.

    Вы сможете легко увидеть, как работает vh, если поменяете высоту окна браузера. Текст выше будет расти/уменьшаться.

    Итого

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

    • px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
    • em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: «x»(ex) и «0»(ch), используется там, где нужно упростить масштабирование компоненты.
    • rem – задаёт размер относительно шрифта , используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у .
    • % – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
    • vw, vh, vmin, vmax – относительно размера экрана.

    Источник: https://learn.javascript.ru/css-units

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


    rgb(255, 0, 0)
    rgb(0, 255, 0)
    rgb(0, 0, 255)

    Пример должен отобразиться так:

    Цвета в RGB.

    В первом блоке мы задали только красный цвет на максимальную насыщенность — 255, показатели остальных цветов равны нолю. В следующих примерах аналогично сделали с зелёным и синим цветом.

    Обратите внимание, в примере я установил для свойст height (высота блока) и line-height (высота строки) одинаковое значение — 40px, это позволило установить текст в блоке по центру вертикали.

    Шестнадцатеричные цвета

    Как следует из названия, для задания цвета в данном случае используется шестнадцатеричная система.

    Если обычно мы пользуемся десятичной системой с цифрами от 0 до 9, то в шестнадцатеричной системе используются следующие цифры: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

    В качестве цифр диапазона от 10 до 15 используются латинские буквы. В таблице №3 показано соответствие десятичных и шестнадцатеричных чисел.

    Табл. 3. Десятичные и шестнадцатеричные числа меньше 16

    Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
    Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F

    Для написания шестнадцатеричных чисел больше 15 используют объединение двух шестнадцатеричных цифр. Так, для записи числа 255 в шестнадцатеричной системе используется FF.

    Табл. 4. Десятичные и шестнадцатеричные числа больше 16

    Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
    Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F

    В десятичной системе самое большое число, которое можно записать при помощи двух цифр — это 99, в шестнадцатеричной системе при помощи двух цифр можно написать число — FF, оно соответствует 255.

    Если цвет указывается в 16-ричной системе, то перед числовым значением нужно ставить знак «#», например #C0C0C0.

    Допускается сокращенная запись 16-ричного цвета: вместо 6-значного числа можно указать 3-значное. Это допустимо только в случае, когда две цифры в значении цвета повторяются.

    Происходит следующее преобразование:

    #rgb —> #rrggbb

    Например, цвет #ffffaa можно кратко написать так — #ffa, или цвет #332211 можно записать в виде #321.

    Кратко про RGBА

    Формат RGBA по синтаксису практически соответствует формату RGB, но тут добавлен четвёртый канал — альфа-канал, задающий прозрачность элемента.

    Следует отметить, что фотрмат RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии.

    На момент написания этой статьи стандарт CSS3 ещё не утверждён и находится в разработке, так что некоторые вещи в нём могут поменяться.

    Значения для альфа-канала: 0 соответствует полной прозрачности, 1 — полной непрозрачности, а промежуточные значения вроде 0.5 — полупрозрачности.

    Вот как он сработает:

    Этот код по своему визуальному представлению аналогичен следующему:

    Вот его результат:

    Некоторые цвета в CSS можно указать по их названию. В таблице №4 приведены названия,сам цвет, код в 16-ричной системе и русское название.

    Табл. 4. Названия цветов

    ИмяЦветКодОписание
    white #ffffff или #fff Белый
    silver #c0c0c0 Серый
    gray #808080 Тёмно-серый
    black #000000 или #000 Чёрный
    maroon #800000 Тёмно-красный
    red #ff0000 или #f00 Красный
    orange #ffa500 Оранжевый
    yellow #ffff00 или #ff0 Жёлтый
    olive #808000 Оливковый
    lime #00ff00 или #0f0 Светло-зелёный
    green #008000 Зелёный
    aqua #00ffff или #0ff Голубой
    blue #0000ff или #00f Синий
    navy #000080 Тёмно-синий
    teal #008080 Сине-зелёный
    fuchsia #ff00ff или #f0f Розовый
    purple #800080 Фиолетовый

    Адреса файлов

    Адреса файлов (URI, Uniform Resource Identifiers, унифицированный идентификатор ресурсов) в значениях свойств CSS могут применяться для указания пути к файлу, например, для установки фоновой картинки в документе. Для использование этого типа свойств значений используется ключевое слово url(), внутри скобок пишется адрес файла, возможен как относительный, так и абсолютный формат.

    Источник: http://komotoz.ru/uroki/css/edinicy_izmereniya_v_css.php

    Таблицы стилей для веба Советы и хитрости по CSS

    Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px. Значит ли это, что для разных свойств нужны разные единицы?

    Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.

    Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (margin: 1.2in; margin: 0.5cm), и наоборот.

    Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:

    Ре­ко­мен­ду­ютсяМож­но ино­гдаНе ре­ко­мен­ду­ются

    Экран

    Печать

    em, px, % ex pt, cm, mm, in, pc
    em, cm, mm, in, pt, pc, % px, ex

    Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

    Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm):

    Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру.

    Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати.

    Важно

    На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

    В прошлом CSS требовал, чтобы абсолютные единицы отображались правильно даже на компьютерных экранах. Но поскольку неправильных реализаций было больше, чем правильных, и никаких улучшений не предвиделось, в 2011-м CSS отказался от этого требования. Сейчас абсолютные единицы обязаны работать правильно только при выводе на печать и на устройствах высокого разрешения.

    CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

    Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em.

    Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр.

    , для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.

    5em и margin: 1em в CSS крайне популярны.

    Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o.

    У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

    Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания).

    Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

    Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

    Совет

    Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему.

    Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

    На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать.

    В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии.

    Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы cm, pt, mm, in и pc, как объяснялось выше).

    CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой.

    Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px.

    Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px, а не pt, cm и т.д.

    Обратите внимание

    Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt, пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt, ни других абсолютных единиц, а использовать только em и px.

    Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

    0.5pt, 1px, 1pt, 1.5px, 2px

    Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px.

    Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.

    5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

    Волшебная единица CSS, px, часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

    Но размеры шрифтов еще лучше задавать в em. Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em: H1 {font-size: 2.5em}, чтобы H1 был в 2½ раза крупнее основного шрифта страницы.

    Едиственное место, где можно использовать pt (либо cm или in) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

    Важно

    Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px, всегда выглядит хорошо и везде достаточно похоже.

    Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:
    div.

    mybox { border: 2px solid }
    @media (min-resolution: 2dppx) { /* Media with 2 or more dots per px */ div.mybox { border: 1.5px solid }
    }

    Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem. Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе.

    В отличие от em, который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:p { margin-left: 1em }
    h1 { font-size: 3em; margin-left: 0.

    333em }

    и новая версия:p { margin-left: 1rem }
    h1 { font-size: 3em; margin-left: 1rem }

    Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает).

    Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

    Источник: http://www.w3.org/Style/Examples/007/units.ru.html

  • Ссылка на основную публикацию