Урок №9. Размеры в CSS: px, em, %, pt

• px - пиксели
• em - единицы
• % - проценты
• pt - точки

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

Points (pt): «pt», традиционно используются в печатных СМИ. Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер.

«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д.

Percents (%): Для размера шрифтов единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility). Для размеров блоков же они имеют несколько другой смысл, за 100% берется соответствующий размер у родительского элемента, например мы хотим взять 50% от элемента, в котором помещается этот текст, внутри этого дива возьмем еще один див, который возьмет так же 50% по ширине и для сравнения ниже возьмем див с размером 25%, вот что у нас получится: