Значения размеров в HTML5
В языке HTML5 существуем много вариантов задать размер шрифта или блока.
Так как же правильно и валидно задать размер? На этот вопрос нету ответа так как каждый вебмастер сам выбирает себе систему измерения будь то проценты или соотношения или пиксели.
/* ОДИНИЦІ ВИМІРЮВАННЯ */
width: 50%; /* проценты */
font-size: 2em; /* умножается на высоту шрифта (2em - в два раза больше) */
width: 200px; /* пиксели */
font-size: 20pt; /* пункты */
width: 5cm; /* сантиметры */
min-width: 50mm; /* миллиметры */
max-width: 5in; /* дюймы */
height: 0.2vh; /* умножается на высоту окна браузера (CSS3) */
width: 0.4vw; /* умножается на ширину окна браузера (CSS3) */
min-height: 0.1vmin; /* наименьшее из vh и vw (CSS3) */
max-width: 0.3vmax; /* наибольшее из vh и vw (CSS3) */
Размеры для элементов:
- 1px (пиксель) = 1/96 дюйма, но не в css. 1 px в css - это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). в каких бы единицах измерения мы бы не писали код, он приводится именно к px.
- 1% — значение высчитывается относительно значения свойства родительского тега.
- 1vw = 1% от ширины окна.
- 1vh = 1% от высоты окна.
- 1vmin - Равна vh или vw в зависимости от того, что из них меньше.
- 1vmax = Равна vh или vw в зависимости от того, что из них больше.
Размеры шрифта:
- 1px (пиксель) - это точка на экране пользователя.
- 1 em = значению font-size родителя.
- 1 rem = значению font-size <html> (корневого элемента документа).
- 1 ch - Представляет ширину символа "0" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.
- 1 ex - Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; 1ex ≈ 0.5em во многих шрифтах.
- vw – 1% ширины окна
- vh – 1% высоты окна
- vmin – наименьшее из (vw, vh), в IE9 обозначается vm
- vmax – наибольшее из (vw, vh)
Очень редко используются такие размеры как:
- cm - Один сантиметр. 1cm = 96px/2.54.
- mm - Один миллиметр. 1mm = 1/10 от 1cm.
- in - Один дюйм. 1in = 2.54cm = 96px.
- pc - Одна пайка. 1pc = 12pt = 1/6 от 1in.
- pt - Одна точка. 1pt = 1/72 от1in.
Указывая размеры следует учесть для каких устройств будет документ.
Рекомендуются | Можно иногда | Нерекомендуются | |
---|---|---|---|
Экран | em, px, % | ex | pt, cm, mm, in, pc |
Печать | em, cm, mm, in, pt, pc, % | px, ex |
Баги размеров которые можно наблюдать в html:
↬ Баг с EM. (em) при использовании transform: scale() ведет себя страно и дочерние элементы заданы в (em) могут перекрывать дуруг друга.
↬ Баг с РХ. Пикселями не возможно точно задать размер - поэтому на разных экранах размеры элементов будут разными... На глаз практически незаметны.
↬ Баг с (rem). Баг можно наблюдать в списках. Например:
<style>
html {font-size: 14px;}
li {font-size: 0.8rem;}
</style>
<ul>
<li>Собака</li>
<li>бывает</li>
<li>кусачей</li>
<li>только</li>
<li>от жизни</li>
<li>собачей</li>
</ul>
То получим такой результат (каждый список будет уменьшатся от размера верхнего):
Полезные ссылки:
0. Детально на прикладі про одиниці виміру в HTML
1. Сервис который показывает единицу в разных размерах - смотреть
2. Существуещие размери и их актуальность по MDN - смотреть