» » » Значения размеров в HTML5
87 0  

Значения размеров в HTML5

В языке HTML5 существуем много вариантов задать размер шрифта или блока.

Так как же правильно и валидно задать размер? На этот вопрос нету ответа так как каждый вебмастер сам выбирает себе систему измерения будь то проценты или соотношения или пиксели.

Размеры для элементов:

  • 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) могут перекрывать дуруг друга.


↬ Баг с РХ. Пикселями не возможно точно задать размер - поэтому на разных экранах размеры элементов будут разными... smile На глаз практически незаметны.


↬ Баг с (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>

То получим такой результат (каждый список будет уменьшатся от размера верхнего):
 


Полезные ссылки:

1. Сервис который показывает единицу в разных размерах - смотреть
2. Существуещие размери и их актуальность по MDN - смотреть



Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019