EN
Оставить заявку

CSS Font-Size: em или px

CSS Font-Size: em или px

Мы перешли в ту эпоху Web-a когда можно, а иногда и нужно позволить пользователю подстроить сайт и приложение под себя. Так что, когда дело доходит до изменения размера управляющих компонентов а также при разных разрешениях экрана, имеется ввиду не только размер шрифта но и ширина/высота/радиус/внутренние и внешние отступы и т.д. Так как мы можем сделать это проще? Конечно же использовать em.

 

Использование, общепринятых px в данном случае, доставит немало хлопот. Например, размер шрифта задан у нас в N местах, при использовании медиазапросов придется писать кучу запросов для разного значения разрешения экрана…. НО, если использовать em то нужно поменять только одно значение в теге body и все значения перебьются. Удобно, не правда ли?

(em) — это масштабируемая единица измерения, которую использует в web. 1em равен текущему размеру шрифта, например, если font-size
в документе равен 20-ти пикселям 1em == 20px, а 5em == 100px соответственно.

 body{ font:2em/1.4 Arial; } @media (max-width: 970px) { body { font:1.2em/1.4 Arial; } } 

Иногда, сложность заключается в том что, значение 1 px != физическому значению пикселя экрана пользователя. «px» в CSS на самом деле не имеют ничего общего с экрана в пикселях. Ну и конечно же, подведем итоги.

Преимущества EM:

  • Очень удобно и быстро меняются размеры всего.Если мы меняем значение элемента то каскадно поменяются все дочерние элементы.
  • Если нужно, то дочерние элементы можно переопределить как обычно, в пикселях.
  • Это очень удобно для изменения размера программно. Например, пользователь может изменить их в настройках.
  • Очень удобно, и сохраняется качество шрифта при масштабировании размеров страницы.
  • Случается так, что пользователи переопределят размер шрифты через браузер. Использование em.
    позволяет посетителю видеть и использовать масштабируемый текст при любом разрешении и на любом устройстве.

Недостатки EM:

  • Браузеры округлят не целое значение размера , что не сказывается при больших размерах, но на маленьких деталях можно увидеть неточность.
  • В случае наследование значения em тоже наследуется, это может принести не мало хлопот.
     ul li{
    font-size:1.1em;
    }
    ul li li{
    /*Будет равна 1.1em от родительского li*/
    }

  • Конфликтует с препроцессорами(То есть,после компиляции не получиться динамически поменять значениеem ).
  • При использовании transform: scale() элементы перекрывают друг друга.

Использовать em или нет — решать вам.

CSS Font-Size: em или px 4.06/5 280
Контакты
Украина
0 800 330 690
бесплатно по Украине с любого номера
Киев, ул. Вадима Гетьмана, 1Б
Харьков, ул. Отакара Яроша, 18
Нью-Йорк
Москва
 
ОБСУДИТЬ ПРОЕКТ
Крутые проекты начинаются с заполнения этой формы
Success
Заявка успешно отправлена
Спасибо, что обратились в Art Lemon.
Обращения обрабатываются с 10:00 до 18:00 по будням. Заявки, полученные в выходные, обрабатываются в первой половине следующего рабочего дня.
Переверните устройство