Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Обзор новых относительных единиц измерения шрифтов CSS3

19 апреля 2015 | Опубликовано в css | 1 Комментарий »

Сегодня мы расскажем о уже широко используемых новых относительных единицах измерения шрифтов CSS3. Десятилетие нам приходилось неэффективно использовать недостаточные ключевые слова, такие как small (маленький), medium (средний), large (большой) и т. п. и несовершенными единицами фиксированного размера, такими как px, pt, mm и т. п. Не смотря на то, что проблемы с единицей измерения px в браузере Internet Explorer закончились, единицы измерения % и em оставались наилучшим выбором, особенно для адаптивной верстки. 

 

 

К счастью, в CSS3 есть несколько новых единиц измерения.

Единицы измерения rem 

Одна из сложностей с единицами измерения % и em заключается в проблеме с вложенными многокомпонентными структурами. Например:

<style>
body  { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>

<p> 12px text </p>
<ul>
<li> 12px text
<ul><li> 9px text </li></ul>
</li>
</ul> 

Единицы измерения em задают размер относительно размера в своем родительском блоке, так что во вложенных списках, как в примере выше, получается уменьшение размеров шрифта с каждым уровнем вложенности списка. Может быть непросто задать таким способом размеры шрифтов на сложных страницах, приходится действовать методом проб и ошибок.

Единицы измерения rem похожи на единицы измерения em, но их размер задается относительно размера корневого элемента, а не родительского. Изменив размер шрифта у списка на 0,75rem, мы добьемся сохранения размера шрифта 12px во всех вложенных списках.

Единицы измерения rem поддерживаются современными версиями браузеров Chrome, Firefox, Safari, Opera и браузером Internet Explorer от версии 9. Старым версиям браузеров понадобится обходной путь, и, вероятно, его будет легче задать с помощью абсолютных единиц измерения, например, так:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

 

Единицы измерения vw, vh и vmin 

Эти новые свойства позволяют изменять размер шрифтов в соответствии с измерениями устройства отображения, т. е.:

  • 1vw — 1% ширины устройства отображения.
  • 1vh -  1% высоты устройства отображения.
  • 1vmin — наименьшее значение из 1vw и 1vh.

Например, предположим, что размер устройства отображения Вашего браузера установлен как 1,000 на 1,200 пикселей, тогда:

  • 1.5vw = размер шрифта 15px
  • 1.5vh = размер шрифта 18px
  • 1.5vmin = минимальное значение из 1.5vw и 1.5vh = размер шрифта 15px

Эти новые единицы измерения произведут революцию в адаптивном дизайне. Но не забывайте, что текст на мобильном устройстве часто выглядит немного больше, так как Вы держите устройство ближе, чем располагается монитор.

С поддержкой браузеров пока есть сложности, но, надеемся, вскоре все проблемы разрешатся:

  • Браузер Internet Explorer версии 10 — полностью поддерживается
  • Браузер Internet Explorer версии 9 — поддерживается, но единицы измерения vmin называются “vm”.
  • Браузер Chrome от версии 22 — полностью поддерживается.
  • Браузеры Safari версии 6 и iOS Safari версии 6 — полностью поддерживается.
  • Браузер iOS Safari версии 7 — частично поддерживается, есть некоторые сбои, почитайте об обходном пути.
  • Браузер Firefox от версии 19 — полностью поддерживается.
  • Браузер Opera от версии 15 — полностью поддерживается.
  • Браузер Blackberry от версии 10 — полностью поддерживается.
  • Браузер Android от версии 4.4 — полностью поддерживается.
  • Браузер Chrome для устройств с операционной системой Android от версии 40 — полностью поддерживается.
  • Браузер Firefox для устройств с операционной системой Android от версии 33 — полностью поддерживается.
  • Браузер UC для устройств с операционной системой Android — не поддерживается.
  • Браузер Internet Explorer Mobile от версии 10 — полностью поддерживается.
  • Браузер Opera Mini  — не поддерживается.
  • Браузер Opera Mobile — пока не поддерживается, но поддержка обещана от версии 24.

Опять же пока что можно порекомендовать некоторое время использовать обходной путь:

p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}

 

Надеемся, вам пригодятся новые единицы измерения шрифтов.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Обамчик
    Thumb up Thumb down 0

    Мда, древнейшая статья... лишь бы кликов набить автору.

    Ответить

Оставить ответ


+ девять = 14

Вставить изображение