Соотношения px, pt, em и %
Немного теории:
Pixels (px): `px` имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием 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 и т. д. Использование `em` становятся все более популярным в
веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
Размеры в em – относительные, они определяются по текущему контексту.
<div style="font-size:1.5em">
Строка размером 1.5em
<div style="font-size:1.5em">Это тоже строка размером 1.5em</div>
</div>
Результат:
Percents (%): Единицы измерения в % похожи на `em`, за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании `%`, ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Root Ems (rem): Единица `rem` задаёт размер относительно размера шрифта элемента <html>. Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.
| Пункт (pt) | Пиксель (px) | Единица (em) | Процент (%) |
|---|---|---|---|
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
України
втрати противника
орієнтовно склали:
Поиск