em в CSS


Содержание

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

Единицы измерения CSS используются для указания величины в различных свойствах. Они делятся на абсолютные и относительные.

Абсолютные единицы

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.

Обычно эти единицы измерения используются при указании размера для вывода страниц на печать.

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.

Относительные единицы

К относительным единицам измерения относятся пиксели (px) и проценты (%). Процент — единица измерения, не имеющая напрямую никакого отношения к размеру шрифта в элементе или к размеру самого элемента. Величина свойства, установленная в процентах, напрямую зависит от величины этого же свойства, установленного для родительского элемента. Например, размер шрифта задается относительно размера шрифта родительского элемента, также высота и ширина выражается в процентах относительно высоты и ширины области содержимого родительского элемента.

Пиксель — точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em — высота текущего шрифта, ex — высота символа «х» в нижнем регистре указанного шрифта.

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

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem — размер шрифта корневого элемента ( ), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.

Двумя дополнительными единицами являются vmin и vmax, которые задают минимальное или максимальное значение размера области просмотра.

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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

Обратите внимание, что объявление не будет работать, если перед единицей измерения стоит пробел, или если единица измерения не указана (за исключением нулевого значения). Если в качестве значения используется ноль, то указание единицы измерения можно опустить.

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

Единицы измерений в CSS

Единицы измерений в CSS — это важная часть кода, которая используется при верстке страницы постоянно.

Они бывают абсолютными и относительными.

Абсолютные единицы измерений CSS

Абсолютные единицы измерений имеют фиксированное значение, часто зависящее от друг от друга, и привязаны к некоторым физическим измерениям. Они полезны в том случае, когда известно средство вывода. Абсолютные единицы состоят из физических единиц (дюймов, см, мм, пунктов, пик) и единицы визуального угла (px):

Единица измерения Название Эквивалент
сантиметры 1cm = 96px/2.54
миллиметры 1mm = 1/10 от 1cm
дюймы 1in = 2.54cm = 96px
пика 1pc = 1/6 от 1in (дюйма) или 12 пунктов
пункты 1pt = 1/72th от 1in (дюйма)
пиксели 1px = 1/96 от 1in (дюйма)

Из всех этих единиц чаще всего используют пиксели или пункты. Первые — потому что устройства просмотра (мониторы, планшеты, телефоны и даже телевизоры) имеют разрешение именно в пикселях. А вторые — потому что масса текстовых редакторов позволяют набирать текст именно в пунктах.

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

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Поэтому смысла в их практическом использовании нет. Соответственно, вы вряд ли найдете примеры, где эти единицы применяются. Зато пиксели применяются очень часто, хотя в разных устройствах размер пикселя тоже будет разным. Но в CSS используется некий «стандартизованный опорный пиксель», поэтому его размер считается абсолютным.

Цитата из спецификации:

Опорный пиксель представляет собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Таким образом, при номинальной длине руки 28 дюймов угол зрения составляет около 0,0213 градусов. Для чтения на расстоянии вытянутой руки 1px соответствует примерно 0,26 мм (1/96 дюйма).

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

Относительные единицы измерений

Относительные единицы измерений применяются в верстке намного чаще. Они определяют размер какого-либо элемента относительно другого размера. Таблицы стилей, которые используют относительные единицы, легче масштабируются из одной среды вывода в другую.

Единица Относительно чего измеряется
% от высоты шрифта родительского элемента
Высота шрифта текущего элемента (по умолчанию в браузерах обычно =16px)
Размер шрифта корневого элемента
Высота символа «x» шрифта элемента в нижнем регистре
Ширина символа «0» (ZERO, U + 0030) в шрифте элемента
1% ширины окна просмотра
1% высоты окна просмотра
1% меньшего размера окна просмотра, т.е. меньшее значение из 1vw или 1vh.
1% большего размера окна просмотра, т.е. большее значение из 1vw или 1vh.

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

Начнем с настроек браузера и единицы rem (root em)

Это единица, соответствующая размеру «корневого» элемента, а именно — тега html. Для него не так часто задаются стили, поэтому размер берется из настроек браузера.

В каждом браузере есть настройки шрифтов по умолчанию. Посмотреть их в Хроме можно, нажав в меню «Настройки» на ссылку «расширенные настройки». В открывшемся окне задается тип шрифта по умолчанию для различных семейств шрифта (с засечками, без засечек и моноширинный), а также его размер. Чаще всего, это 16px. Именно он берется за «корневой» — «root» emrem. От этого размера и рассчитывается единицы, указанные в rem.

В инспекторе свойств для выделенного абзаца со стилевым правилом

Единица измерения EM в CSS. Примеры.

Единицу измерения em можно довольно часто встретить при просмотре стилей CSS.

Давайте сейчас разберемся, что это такое и как с этим работать.

Начнем с того, что EM — это относительная единица измерения.

Сколько пространства будет занимать размер в 1 em на экране монитора?

Ответить на этот вопрос однозначно нельзя. При разных условиях, эта размерность будет разная.

Давайте в этом сейчас убедимся:

В этом примере мы видим, что размер текста элемента абзаца в двух разных блоках div задан одинаковым значением 1em. Тем не менее, мы видим, что фактически размер текста в этих двух случаях значительно отличается.

Почему так происходит?

Здесь мы уже подходим к определению единицы размерности em.

EM — это размер, который формируется из размера свойства font-size родительского элемента, умноженного на коэффициент, который указывается перед ним.

Коэффициент, который указывается перед размерностью em можно изменять вплоть до тысячной части:

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

Теперь вопрос, если у родительского элемента не задано свойство font-size?

В этом случае значение em будет расчитываться относительно первого родительского элемента, у которого это свойство задано.

Если в документе вообще нигде явно не задается свойство font-size с конкретным значением, то значение font-size задается браузером автоматически и оно будет равно 16 пикселям.

Это можно наглядно увидеть в следующем примере:

Зачем такие трудности, почему бы просто не использовать везде пиксели?


Дело в том, что использование единиц em дает одно главное преимущество: размеры в em очень хорошо подстраиваются под размер экрана пользователя.

Таким образом, просматривая веб-страницу на компьютере с большим монитором и на маленьком мобильном телефоне, пропорции и размеры элементов указанные в em будут везде одинаковыми.

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

Автор:
Дмитрий Ченгаев

Делюсь своим опытом в веб-разработке, чтобы вы реализовали свои идеи и проекты.

Учимся понимать единицы «em» в CSS

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

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

В спецификации представлено довольно простое объяснение параметру em:

Другими словами, если у нас будет следующий код CSS:

Это означает, что 1em, установленное в том элементе или в любом из его дочерних элементах, будет равное 20 пикселям. Вот доказательство .

Если вы используете следующий код:

Это означает, что ширины и высота элемента (указанные здесь как 4em x 4em) будут составлять 80px x 80px (20px * 4 = 80 px).

Ключом к запоминанию является предназначение em и происхождение данного параметра. Следуя материалам из Wikipedia :

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

Используя данный метод вычисления, в CSS-файле не бывает точного определения тому, что есть такое em. Значение данной единицы зависит от того, как составлены ваши каскадные таблицы стилей. Теоретически, если вы указали значение длины всех элементов в единице измерения em, то изменения одного лишь размера шрифта будет достаточно, чтобы «уничтожить» всю вашу точную до пикселя разметку.

А что если я не использую параметр font-size?

В примере, приведенном выше, и в JSBin, на который мы сослались, точно указан параметр font-size. Единица em впоследствии выводится из параметра «base». Но что если в элементе не указан точный параметр font-size?

В таком случае, так как параметр font-size наследуется по всему древу документа, значение единицы em будет выведен из того параметра, который был унаследован. Если во всем документе ни разу не упоминается параметр font-size, то значение отдельной единицы em будет равным 16 пикселям, что является значением по умолчанию (и нам кажется, что это не различается во всех браузерах).

«rem» должен быть автоматическим для людей

Пришло время привлечь и новое добавление в CSS: единицу rem . Данная единица (название получено от «root em») отлично поддерживается во всех браузерах: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.

В целом, данная единица очень проста к пониманию. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном «главном» значении, указанном в «html»-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem, например:

И, как и в случае с em, если вы не указываете значение font-size в «html»-элементе, то «главная» единица (root em) будет равна 16 пикселям по умолчанию.

Можно выдумать еще целую кучу выражений с em :)

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

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

Итак, надеемся, вам понравилось наше сегодняшнее руководство, и вы найдете применение полученным знаниям.

Не забываем комментировать!

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Размер шрифта в CSS. Единицы измерения px, %, em

Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size , для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:

Размер шрифта в пикселях

Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px . Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:

Размер шрифта в процентах

Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p , как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:

Если же в этом случае задать размер шрифта 50% , то он будет равен половине базового размера. Значение 200% , наоборот, увеличит шрифт в два раза.

Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.

Единица измерения em

По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60% , 3em = 300% и так далее. Пример записи:

Значения размеров шрифтов, указанные в em , наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em , то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:

Скриншот: наследование значений размеров шрифтов

В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem , которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem , то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.

Ключевые слова

Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:

Ключевое слово Размер в пикселях
xx-small 9px
x-small 10px
small 13px
medium 16px
large 19px
x-large 24px
xx-large 32px

Как видим, значение medium соответствует базовому размеру шрифта 16px . Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.

Завершение

В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймы in , сантиметры cm , миллиметры mm . Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.

Читайте далее: как установить жирный шрифт и курсив в CSS.

Как правильно использовать в html единицу измерения em?

Решил сверстать страничку и стилизовать её. Помогите, пожалуйста, разобраться, как правильно использовать для свойства font-size единицу измерения em?

В самом верху главного CSS-файла у меня прописывается значение font-size по-умолчанию:

Теперь я хочу, чтобы чуть ниже на web-страничке у меня было слово размером в 12px. Но как задать размер в em? Как использовать при стилизации только единицу измерения em?

Поделитесь, пожалуйста, практикой. Вот, решили вы создать сайт. Решили правильно задать размеры шрифтов и т.д. Что и где вы прописали? Спасибо !

  • Вопрос задан более двух лет назад
  • 620 просмотров

Вы задаете :root значение размера шрифта (кстати познакомьтесь с вот этой идеей — сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно — это как масло масляное.

1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.

1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.

Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях — вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.

Em в CSS

Единица em соответствует значению свойства font-size элемента. Если это значение не задано, тогда берётся значение font-size родителя.


Пример

В данном примере параметры блока устанавливаются через единицу em , при этом размер, относительно которого считается em , задан через свойство font-size .

Спецификация ?

Спецификация Статус
CSS Values and Units Module Level 4 Рабочий проект
CSS Values and Units Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

3 12 1 3.5 1 1
2.0 4 10.1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Единицы измерения CSS, размер шрифта

Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

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

В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:

Обращаю Ваше внимание, что при использовании свойства font-size необходимо всегда указывать положительные единицы измерения величины, при этом, вы не должны указывать пробел между числом и единицей измерения:

В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.

Абсолютные величины

Физические единицы:

  • Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
  • Сантиметры (cm), 1cm = 96px/2.54.
  • Миллиметры (mm), 1mm = 1/10 от 1cm.
  • Четверть миллиметра, (q) 1q = 1/40 от 1cm.
  • Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
  • Пункты (pt), 1pt = 1/72 дюйма.

Как вы можете заметить, к абсолютным величинам относятся дюймы, сантиметры, миллиметры, пики и пункты. Как правило, абсолютные величины используются только в печати (предназначены для использования совместно с устройствами вывода), так как отображение информации будет отличаться в зависимости от монитора, поэтому они имеют очень скудное применение на веб-страницах.

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

Визуальные единицы:

Пиксели (px), 1px = 1/96 от 1in (дюйма).

Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя. Конечное отображение информации происходит именно в пикселях, которые подгоняет веб-браузер пользователя.

С развитием мобильных устройств, нам стали доступны экраны, которые содержат большое количество пикселей, но при этом сами по себе намного меньше настольных мониторов, в этом случае для обеспечения комфортного чтения с экрана, браузер может применять масштабирование.

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

Относительные единицы

Процентные значения.

Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средствами CSS, то браузер применит к тексту свои значения «по умолчанию». В большинстве случаев текст, находящийся вне заголовков отобразится высотой 16 пикселей (базовый размер шрифта текста).

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

Давайте рассмотрим пример. Допустим, у всех параграфов (элемент

) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):

Результат нашего примера:

Рис.51 Пример использования процентных значений.

В данном примере базовый размер шрифта текста не изменялся, и расчет процентных значений происходил следующим образом для параграфов:

При работе с процентными значениями обратите Ваше внимание на то, что все вложенные элементы наследуют значения и используют их для вычисления своих размеров шрифтов. Что это значит, разберем в примере:

Результат нашего примера:

Рис.52 Пример наследования процентных значений.

В данном примере для вложенного блока

Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

Если бы мы не изменили значение размера шрифта для блока

Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы

Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

Единица измерения еm.

Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

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

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

Обращаю Ваше внимание, что при работе, как с процентными значениями, так и со значениями em, вложенные элементы наследуют значения и используют их для вычисления своего размера шрифта.

Результат нашего примера:

Рис.53 Пример использования значений em.

Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.


Единица измерения rеm.

Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

Основное отличие от em заключается в том, что размер текста задается от базового размера корневого элемента, а не текущего размера шрифта родительского элемента. Чтобы окончательно понять, давайте рассмотрим сравнение на примерах:

В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25em . В результате сработали правила наследования стилей и для каждого последующего вложенного блока, родительский блок становится базовым, что в дальнейшем сказывается на расчете размера шрифта, исходя из размера шрифта родительского элемента. Как вы понимаете, с каждым вложенным блоком увеличивается размер шрифта.

Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании :)

Рис.54 Пример наследования значений em.

Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem .

В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25rem . В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.

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

Рис.55 Пример использования значений rem.

Обе вышерассмотренные единицы измерения имеют широкое применение среди разработчиков, но при этом имеют как сильные, так и слабые стороны. С опытом вы определите для себя те критерии, когда необходимо использовать ту или иную единицу измерения в зависимости от возникших обстоятельств.

Единица измерения еx.

Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.

В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

Единица измерения ch.

Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

Масштабируемые величины относительно экрана

С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).

Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.

1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.

Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.

В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw , для третьего — 3vw ), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw , для третьего — 50vw ) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh , для третьего — 20vh ).

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

Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».

Результат нашего примера:

Рис.57 Масштабируемые единицы измерения.

Минимальное и максимальное значение области просмотра

Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:

1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.

1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block ), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0 .

Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin . Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

Для высоты расчёт аналогичен:

В итоге мы получили «квадрат Малевича».

Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.

Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:

  1. Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Andro >vmax , iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax , 7 версия – некорректно работала единица измерения vh ).
  2. Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
    • IE работает только с версии 9.0 (поддерживает значение vm , вместо vmin ).
    • IE 10, IE 11 не поддерживают значение vmax .
    • Edge 12, 13, 14 не поддерживают значение vmax .

Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.

Полный перечень возможных ключевых слов с расшифровкой размещен в следующей таблице:

Значение Описание
medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger Устанавливает размер шрифта большего размера, чем у родительского элемента.

Рассмотрим пример использования ключевых слов на странице:

В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

Результат нашего примера:

Рис.59 Использование ключевых слов для управления размером шрифта.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

    Практическое задание № 13
    У нас имеются следующие стили, в которых элемент и элементы

Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
  • Сколько в пикселях составляет размер шрифта текста, внутри блока

Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
  • Сколько в пикселях составляет размер шрифта текста, внутри блока

Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
  • Сколько в пикселях составляет размер шрифта текста, внутри блока

CSS Font-Size: em или px

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

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

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

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

5. CSS — Относительные и абсолютные единицы измерения

Прежде чем перейти к практическим упражнения, мы бы хотели кратко рассказать о единицах измерения в CSS.

CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = «5px solid blue».

Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:

Илон Маск рекомендует:  Модуль работы с видео адаптером
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL