Font size 1em: px, em, rem и другие

Содержание

em vs. px vs. pt vs. percent / Хабр

Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

Знакомьтесь — единицы

1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Итак, в чем же разница?

Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.

Изменение Font-size от 100% до 120%.

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

«em» vs «%»

Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.

В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).

Размер шрифта, когда клиент изменяет размер текста в браузере.

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.

Вердикт

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

Победитель: процент (%).

Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax

Всем привет! Меня зовут Анна Блок, и сегодня мы поговорим про единицы измерения в CSS. Наверняка, многие из вас знают о таких единицах измерения, как px и %. Однако, по мимо всего прочего, мы разберем, как работают rem, em, vh, vw, vmax и vmin.

Cтатья получится большой, поэтому разобьем её на две части. Здесь мы поговорим о том, как эти единицы измерения влияют на размер шрифта, т.е на font-size. Во второй части затронем тему, насколько удобно использовать такие единицы измерения для того что бы управлять свойствами padding, margin, height, width и border-radius.

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

Pixels

Давайте начнем с самого распространенного — px (c англ. pixels). Пиксель — это базовая, абсолютная и окончательная единица измерения. Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.

Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс

box-px за счет которого мы и будем стилизовать текст, который находится внутри.

<div>
   <h3>Pixels</h3>
   <p>font-size:16px</p>
   <p>font-size:8px</p>
   <p>font-size:32px</p>
</div>

Обратите внимание, основные классы дублируются. На всю основную стилизацию влияет класс, который стоит после box. Например, если просмотреть код CSS, то можно увидеть стилизацию .box-px .text-1.

.box-px .text-1 {
   font-size:16px;
}

В примере мы видим значение font-size:16px, то есть то, что написано в классе text-n, то и дублируется в CSS. Это сделано для наглядности. Вы должны понимать, что большинство браузеров по умолчанию имеют значение

font-size: 16px. Если убрать свойство .box-px .text-1, то визуально ничего не изменится. При этом если мы вернем свойство назад, то тоже ничего не изменится, потому что это значение заложено по умолчанию в браузере. Однако, все что мы стилизуем далее — видоизменяется:

.box-px .text-2 {
   font-size:8px;
}
.box-px .text-3 {
   font-size:32px;
}

Если мы используем значение меньше 16px, то наш текст уменьшается. И наоборот: если мы будем использовать значение больше, то текст увеличится. Звучит логично, не так ли? Но как работают другие единицы изменения? Давайте разбираться дальше.

Percent

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

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

span,и внутри которого разместим еще один span

<p>Lorem <span>Lorem<span>Lorem</span></span></p>

Для тега p добавим следующее:

p {
   font-size: 100%;
}

Если бы мы были браузерами, то высчитали значение font-size: 16px. Далее переходим к span. Стилизуем его:

p>span {
   font-size: 50%;
}

Мы увидим, что вложенный span и тот span, который находится внутри него, стали равнозначны значению 8px. Как мы это посчитали? Итак, font-size: 100% = 16px и если мы берем половину, то есть 50%, то половина этого значения и будет значение 8px.

Теперь давайте стилизуем еще большую вложенность:

p>span>span {
   font-size: 400%;
}

Если бы мы указали здесь значение 200%, вышло бы, что мы взяли 2 раза по 8px, складываем 8px + 8px = 16px. Если мы укажем здесь 400%, то здесь у нас станет значение в два раза больше, то есть 16px * 2 = 32px.

Ознакомиться подробнее с HTML и CSS можно тут:

Em

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

div с классом post.

<div>
   Lorem Ipsum
   <div>Lorem Ipsum</div>
</div>

По умолчанию body равен font-size: 16px. Далее стилизуем post:

body {
   font-size: 16px;
}
.post {
   font-size: 1.2em;
}

Чтобы вычислить значение post, вы можете взять в руки калькулятор, либо (если вы используете систему macOS) набрать комбинацию CMD + пробел, открыть окно ввода для вычислений. Итак, нам необходимо умножить 16 на 1.2. Итого у нас получится 19.2. Это значит, что браузер выводит текст post, как 19.2px. Такую относительную единицу измерения удобнее использовать, если вам нужно изменить значение в body, например, поставить значение 30px. И тогда значение в

post будет вычисляться автоматически, то есть умножаться на 1.2. При этом если бы вы работали с пикселями и написали бы в post 30px, а в body в дальнейшем написали бы 50px, то ничего бы у вас не изменилось в значении post и соответственно вам бы пришлось вводить все это вручную.

Ознакомиться подробнее с HTML и CSS можно тут:

Давайте снова вернемся к интерактивной шпаргалке. Мы можем проверить, какие единицы измерения работают в связке с body. Например, если добавить в блоке CSS,

body {
   font-size: 30px;
}

то мы сразу увидим, какие значения меняются. Например, пиксели не изменились совершенно, но при этом у нас изменился блок «проценты» и «em».
Единица измерения rem, не зависит от body, и это первое ее отличие от em.

Вложенность
Итак, пока мы полностью не перешли к теме rem, давайте рассмотрим еще один пример связанный со вложенностями. Самый удобный пример, связанный с вложенностями — это списки, поэтому давайте будем работать с ними.

<ul>
   <li> Первый уровень
      <ul>
         <li> Второй уровень
            <ul>
               <li> Третий уровень
                  <ul>
                     <li>Четвертый уровень</li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Давайте для тега ul, зададим значение 0.8em:

ul {
   font-size: 0.8em; 
}

Первая проблема, которую мы видим, — каждая последующая вложенность становится меньше и кратна значению родителя. При этом, если мы используем значение больше единицы, например 1.8em, то каждая последующая вложенность увеличивается относительно предыдущего уровня. Эту проблему можно решить, но этот метод не совершенен:

ul {
   font-size: 0.8em; 
}

ul ul {
   font-size: 1em; 
}

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

Rem

Итак, как вы уже поняли, это значение не взаимодействует с body, оно взаимодействует с основным корневым тегом html. У корневого узла есть особый селектор псевдокласса, который записывается как :root. В данном случае rem это и есть сокращение от слов «root em», то есть «корневой em». Если вы работаете с rem, то вы должны помнить, что его значения относительны не к текущему элементу, а к корневому. В данном случае совершенно не важно, где вы используете значение rem, оно никак не будет влиять на остальные значения.

Если мы вернемся к предыдущему примеру с вложенностями, то в данном случае, если мы напишем rem, эта проблема отпадёт. Вы так же можете использовать значения больше единицы, и при этом остальные уровни никак не видоизменятся. Они используют те же значения, что и первый элемент.

Ознакомиться подробнее с HTML и CSS можно тут:

Если вернуться к примеру где мы рассматривали em, то мы можем скопировать box и написать box-rem, что сделать небольшое отличие в классах:

<div>
   Lorem Ipsum
   <p>Lorem Ipsum</p>
</div>

Если в стилях запишем

.box-rem .post {
   font-size: 1.2rem;
}

то увидим, что это значение никак не видоизменится, т.к. первый «Lorem Ipsum» записан вне тегов. Он меняется по отношению к body, но при этом, если мы запишем селектор :root

:root {
   font-size: 50px;
}

то мы увидим, что значение post меняется относительно этого сектора.

Ознакомиться подробнее с HTML и CSS можно тут:

Давайте создадим еще один пример и поговорим о некоторых тонкостях с использованием rem. Давайте снова создадим box, внутри которого будет содержаться тег h3 и p

<div>
   <h3>Home</h3>
   <p>Does your lorem ipsum text long for something a little fishier? Give our generator a try… it’s fishy!</p>
</div>

То, что я сейчас покажу — это анти-пример и я не советую применять на своих проектах. И в конце я объясню почему.

Итак, запишем селектор :root.

Заодно давайте поговорим о том, как вычислить 10px с точки зрения em. Для этого открываем калькулятор. Что бы вычислить, сколько будет 10px, мы делим 10 на тот размер, который у нас установлен по умолчанию, то есть на 16px. Итого у нас получается значение 0.625. Давайте запишем:

:root {
   font-size: 0.625em;  /*=10px */
}

Далее давайте будем стилизовать h3. Начнем вычислять font-size с точки зрения rem для этого нам необходимо 14 разделить на 10 и выходит 1.4rem

h3 {
   font-size: 1.4rem; /* =14px */
}

Этот метод удобен тем, что нам не потребуется прибегать к вычислениям. Всё это возможно вычислить в уме. Но я предлагаю сделать заголовок сделать все-таки чуть больше, например, 24px. В rem значении это будет 2.4rem.

h3 {
   font-size: 2.4rem; /* =24px */
}

Как вы видите, по умолчанию, если я не буду стилизовать p, либо какие-то другие элементы, которые будут появляться на странице, например:

<ul><li>Lorem</li><li>Lorem</li><li>Lorem</li></ul>

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

Если вы не хотите использовать размер шрифта 10px по умолчанию, то вы можете использовать другое значение — 14px. Чтобы вычислить, сколько это будет в rem, для этого нужно 14px / 16px. Итог: 0.875rem

:root {
   font-size: 0.875em; /*=14px */
}

Теперь мы видим, что текст по умолчанию стал читабельным. Заголовок увеличился, потому что 2.4rem это уже не 24px. А сколько? Давайте посчитаем: 24px / 14px = 1.71rem. Давайте запишем:

h3 {
   font-size: 1.71rem; /* =24px */
}

В таком случае размер заголовка у нас стал таким же, как тогда когда у нас font-size составлял 10px. Конечно же, такое значение не вычислить в уме, однако работы с кодом по итогу будет значительно меньше.

Давайте предположим, что мы работаем с media-запросами. Например, размер шрифта нам нужно сделать чуть большедля планшетов и ПК устройств. То есть если мы будем использовать media-запросы то внутри мы можем записать min-width: 768px и внутри media мы запишем селектор :root с значением font-size: 1em, то есть 16px:

@media (min-width:768px) {
   :root {
      font-size: 1em;
   }
}

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

Ознакомиться подробнее с HTML и CSS можно тут:

VW / VH

Теперь давайте перейдем к следующим значениям. Это единицы измерения которые относятся к размеру экрана устройства. Все те значения, которые начинаются с буквы V, имеют в себе сокращение слова с английского «viewport» (пер. на русский «область просмотра»). Итак:

vh = 1/100 высоты области просмотра
vw = 1/100 ширины области просмотра
vmin = 1/100 наименьших высоты или ширины области просмотра
vmax = 1/100 наибольших высоты или ширины области просмотра

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

Итак, если рассмотреть пример, который мы видим здесь, и начать уменьшать экран, то можно увидеть, как vw уменьшается по ширине. При этом vh зависит от высоты, поэтому его значения никак не меняются. Если менять высоту экрана, то можно увидеть, что значения в блоке vh меняются в зависимости от высоты, а vw совершенно никак не реагирует. Запись

.box-vw .text-1 {
   font-size: 2vw;
}

значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда берется это значение? Это 2% от 1200px, то есть 1200px * 0.02 = 24px. При этом если взять, например, планшет, который в среднем составляет ширину 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.
Значения vmin и vmax не применимы к font-size поэтому их уже рассмотрим в следующей части, но знайте, что эти значения есть и они работают в связке с vw и vh, однако их можно использовать не всегда, а только в том случае если они необходимы. И не забывайте про поддержку этих значений.

Я надеюсь, эта статья тебе помогла разобраться с тем, для чего используется каждая единица измерения в CSS.
Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Смотреть видео:

Сила единицы измерения em в CSS

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

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

Посмотрите на следующий код CSS:

.example {
    font-size: 20px;
}

В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size) будет равен 20px. Так что, если мы добавим строку:

.example {
    font-size: 20px;
    border-radius: .5em;
}

Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5). Аналогично:

.example {
    font-size: 20px;
    border-radius: .5em;
    padding: 2em;
}

Значение отступа 2em будет равно 40px (20 * 2). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.

Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px. Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.

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

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

Давайте посмотрим на это в действии:

Посмотреть демо

Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме. Слайдер содержит одно значение корневого элемента компонента: значение font-size.

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

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

Обратите внимание, что:

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

Некоторые замечания, упущения и т.д.

Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.

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

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

Единица rem в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент <html>. Таким образом можно использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.

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

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

Данная публикация представляет собой перевод статьи «The Power of em Units in CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!

Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»

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

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

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

Селектор {
font-size: значение с единицей измерения величины;
{

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

p {
font-size: 10px; /* установить размер шрифта 10 пикселей для всех абзацев */
{

В 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 (дюйма).

body {
font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */
}

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

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

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

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

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

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

html {
font-size: 16px;
}

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования процентных значений</title>
<style>
.halfFontSize {
font-size: 50%; 
}
.doubleFontSize {
font-size: 200%; 
}
</style>
</head>
	<body>
		<p>Обычный параграф на странице</p>
		<p>Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.</p>
		<p>Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента.</p>
	</body>
</html>

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

Рис.51 Пример использования процентных значений.
В данном примере базовый размер шрифта текста не изменялся, и расчет процентных значений происходил следующим образом для параграфов:
Первый параграф: 16px * 100% = 16px Второй параграф: 16px * 50% = 8px Третий параграф: 16px * 200% = 32px
При работе с процентными значениями обратите Ваше внимание на то, что все вложенные элементы наследуют значения и используют их для вычисления своих размеров шрифтов. Что это значит, разберем в примере:
<!DOCTYPE html> <html> <head> <title>Пример наследования процентных значений</title> <style> div { font-size: 12px; /* устанавливаем базовый размер шрифта для всех блоков <div> */ } .doubleFontSize { /* устанавливаем размер шрифта в два раза больше чем родительский */ font-size: 200%; } .doubleFontSize > div { /* использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский */ font-size: 200%; } </style> </head> <body> <div>Родительский div 12px <div>Блок, к которому применен стиль с размером шрифта 200% от родительского элемента. <div>Блок, который наследует значение</div> </div> </div> </body> </html>
Результат нашего примера:
Рис.52 Пример наследования процентных значений.
В данном примере для вложенного блока <div> с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок <div>, для которого мы установили размер шрифта 12px.
Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:
12px * 200% = 24px
Если бы мы не изменили значение размера шрифта для блока <div>, то расчёт бы происходил исходя из базового шрифта:
16px(базовый размер шрифта) * 200% = 32px
Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский.
Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:
размер шрифта родительского элемента * 200% = 48px
Единица измерения еm.
Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.
Если вы внимательно отнеслись к изучению использования и наследования процентных значений, то вы быстро сможете освоить работу с такой единицей измерения как em.
В CSS значение em относится к базовому размеру шрифта текста. Сейчас Вы можете подумать, что алгоритм работы значения em функционируют аналогично с процентными значениями и будете практически правы.
Например:
базовый размер текста = 1em = 100% базовый размер текста * 2 = 2em = 200% базовый размер текста * 0.5 = 0.5em = 50%
Обращаю Ваше внимание, что при работе, как с процентными значениями, так и со значениями em, вложенные элементы наследуют значения и используют их для вычисления своего размера шрифта.
<!DOCTYPE html> <html> <head> <title>Пример использования значений em</title> </head> <body> <p style = "font-size:.8em;">font-size:0.8em</p> <p style = "font-size:80%;">font-size:80%</p> <p style = "font-size:1.5em;">font-size:1.5em</p> <p style = "font-size:150%;">font-size:150%</p> <p style = "font-size:1.8em;">font-size:1.8em</p> <p style = "font-size:180%;">font-size:180%</p> </body> </html>
Результат нашего примера:
Рис.53 Пример использования значений em.
Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.
Единица измерения rеm.
Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.
Основное отличие от em заключается в том, что размер текста задается от базового размера корневого элемента, а не текущего размера шрифта родительского элемента. Чтобы окончательно понять, давайте рассмотрим сравнение на примерах:
<!DOCTYPE html> <html> <head> <title>Пример наследования значений em</title> <style> div { font-size: 1.25em; } </style> </head> <body> <div>Блок 1 <div>Блок 2 <div>Блок 3 <div>Блок 4 <div>Блок 5 <div>Блок 6 </div> </div> </div> </div> </div> </div> </body> </html>
В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25em. В результате сработали правила наследования стилей и для каждого последующего вложенного блока, родительский блок становится базовым, что в дальнейшем сказывается на расчете размера шрифта, исходя из размера шрифта родительского элемента. Как вы понимаете, с каждым вложенным блоком увеличивается размер шрифта.
Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂
Рис.54 Пример наследования значений em.
Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem.
<!DOCTYPE html> <html> <head> <title>Пример использования значений rem</title> <style> div { font-size: 1.25rem; } </style> </head> <body> <div>Блок 1 <div>Блок 2 <div>Блок 3 <div>Блок 4 <div>Блок 5 <div>Блок 6 </div> </div> </div> </div> </div> </div> </body> </html>
В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25rem. В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.
В этом и заключается замечательная особенность этой единицы измерения, которая предназначена для тех, кто не готов бросить вызов неожиданно появившихся наследований стилей.
Рис.55 Пример использования значений rem.
Обе вышерассмотренные единицы измерения имеют широкое применение среди разработчиков, но при этом имеют как сильные, так и слабые стороны. С опытом вы определите для себя те критерии, когда необходимо использовать ту или иную единицу измерения в зависимости от возникших обстоятельств.
Единица измерения еx.
Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.
В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.
Единица измерения ch.
Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:
.width50 { width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */ }
Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.
Масштабируемые величины относительно экрана
С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).
Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.
В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:
1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.
1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.
Рассмотрим пример:
<!DOCTYPE html> <html> <head> <title>Масштабируемые единицы измерения</title> <style> * { margin: 0 ; /* внешние отступы для всех сторон*/ } .viewportHeight30 { font-size: 5vw; /* размер шрифта*/ width: 100vw; /* ширина блока */ height: 30vh; /* высота блока */ background-color: orange; /* цвет заднего фона */ } .viewportHeight50 { font-size: 4vw; width: 75vw; height: 50vh; background-color: yellow; } .viewportHeight20 { font-size: 3vw; width: 50vw; height: 20vh; background-color: red; } </style> </head> <body> <div class = "viewportHeight30">font-size: 5vw; width:100vw; height:30vh;</div> <div class = "viewportHeight50">font-size: 4vw; width:75vw; height:50vh;</div> <div class = "viewportHeight20">font-size: 3vw; width:50vw; height:20vh;</div> </body> </html>
В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 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 на следующем примере:
.viewportMin { . viewportMax { width: 40vmin; width: 40vmax; height: 40vmin; height: 40vmax; } }
<!DOCTYPE html> <html> <head> <title>Vmin и vmax c масштабируемыми единицами измерения</title> <style> * { margin: 0; } div { display: inline-block; /* элементы <div> блочно-строчные (выстраиваем в линейку) */ color: white; /* цвет шрифта*/ } .viewportMin { width: 40vmin; /* ширина блока */ height: 40vmin; /* высота блока */ background-color: black; /* цвет заднего фона */ } .viewportMax { width: 40vmax; /* ширина блока */ height: 40vmax; /* высота блока */ background-color: blue; /* цвет заднего фона */ } </style> </head> <body> <div class = "viewportMin">viewportMin<br>w&h - 40vmin</div> <div class = "viewportMax">viewportMax<br>w&h - 40vmax</div> </body> </html>
В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0.
Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin. Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:
400px (текущее минимальное значение viewport области просмотра) * 40% = 160px
Для высоты расчёт аналогичен:
400px (текущее минимальное значение viewport) * 40% = 160px.
В итоге мы получили «квадрат Малевича».
Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:
Ширина - 700px(текущее максимальное значение viewport) * 40% = 280px. Высота - 700px (текущее максимальное значение viewport) * 40% = 280px.
Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.
Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.
Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:
Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax, iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия – некорректно работала единица измерения vh).
Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
IE работает только с версии 9.0 (поддерживает значение vm, вместо vmin).
IE 10, IE 11 не поддерживают значение vmax.
Edge 12, 13, 14 не поддерживают значение vmax.
Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.
Например:
i { font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов <i> */ }
Полный перечень возможных ключевых слов с расшифровкой размещен в следующей таблице:
Значение Описание
medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger Устанавливает размер шрифта большего размера, чем у родительского элемента.
Рассмотрим пример использования ключевых слов на странице:
<!DOCTYPE html> <html> <head> <title>Ключевые слова для управления размером шрифта</title> <style> .medium {font-size: medium;} .small {font-size: small;} .x-small {font-size: x-small;} .xx-small {font-size: xx-small;} .smaller {font-size: smaller;} .large {font-size: large;} .x-large {font-size: x-large;} .xx-large {font-size: xx-large;} .larger {font-size: larger;} </style> </head> <body> <div class = "medium">Блок с ключевым словом medium</div> <div class = "small">Блок с ключевым словом small</div> <div class = "x-small">Блок с ключевым словом x-small</div> <div class = "xx-small">Блок с ключевым словом xx-small <div class = "smaller">Блок с ключевым словом smaller</div> </div> <div class = "large">Блок с ключевым словом large</div> <div class = "x-large">Блок с ключевым словом x-large</div> <div class = "xx-large">Блок с ключевым словом xx-large <div class = "larger">Блок с ключевым словом larger</div> </div> </body> </html>
В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).
Результат нашего примера:
Рис.59 Использование ключевых слов для управления размером шрифта.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:
Практическое задание № 13
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 150%:
body, div { /* создаем групповой селектор */ font-size: 150%; /* устанавливает размер шрифта 150% */ }
Сделаем следующую разметку:
<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.

После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 14
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5em:
body, div { /* создаем групповой селектор */ font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */ }
Сделаем следующую разметку:
<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.

После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 15
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5rem:
body, div { /* создаем групповой селектор */ font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */ }
Сделаем следующую разметку:
<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.

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

© 2016-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

Размер | htmlbook.ru
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+
Описание
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В табл. 1 перечислены основные относительные единицы.
Табл. 1. Относительные единицы измерения
Единица Описание
em Размер шрифта текущего элемента
ex Высота символа x
px Пиксел
% Процент
Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.
Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.
Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.
Пример 1
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Относительные единицы</title> <style> h2 { font-size: 30px; } p { font-size: 1.5em; } </style> </head> <body> <h2>Заголовок размером 30 пикселов</h2> <p>Размер текста 1.5 em</p> </body> </html>
Абсолютные единицы
Абсолютные единицы применяются реже, чем относительные и обычно при работе с текстом. В табл. 2 перечислены основные абсолютные единицы.
Табл. 2. Абсолютные единицы измерения
Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)
Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта. Хотя мы привыкли измерять все в миллиметрах и подобных единицах, пункт, пожалуй, единственная величина из не метрической системы измерения, которая используется у нас повсеместно. И все благодаря текстовым редакторам и издательским системам.
Пример 2
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Абсолютные единицы</title> <style> h2 { font-size: 24pt; } p { margin-left: 30mm; } </style> </head> <body> <h2>Заголовок размером 24 пункта</h2> <p>Сдвиг текста вправо на 30 миллиметров</p> </body> </html>
Примечание
При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).
Свойство font-size | CSS
Свойство font-size позволяет указывать размер текста CSS. Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и ex.
font-size может принимать в качестве значений ключевые слова, единицы измерения или процентное соотношение. Важно отметить, что в рамках применения сокращенного свойства font, font-size является обязательным значением. Если его не указать, то вся строка кода будет игнорироваться.
Значения длины (px, em, rem, ex и т. д.), используемые в свойстве font-size, не могут быть отрицательными.
.element { font-size: small; } }
Свойство, которое устанавливает в CSS размер текста, принимает следующие ключевые слова:
xx-small;
x-small;
small;
medium;
large;
x-large;
xx-large.
Эти обозначения определяют относительные размеры текста CSS, вычисляемые браузером. Но вы также можете использовать два ключевых значения, которые вычисляются относительно размера шрифта, указанного в родительском элементе.
Среди других абсолютных значений можно выделить mm (миллиметры), cm (сантиметры), in (дюймы), pt (пункты) и pc (пики). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.
.element { font-size: larger; }
Например, если свойство font-size у родительского элемента имеет значение small, то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.
.element { font-size: 110%; }
Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо.
.element { font-size: 2em; }
Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:
<div> <h3>Заголовок</h3> <p>Какой-нибудь текст</p> </div>
.container { font-size: 16px; } p { font-size: 1em; } h3 { font-size: 2em; }
В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:
Посмотреть демо
Что касается единиц измерения rem, то здесь font-size всегда зависит от значения корневого элемента (или элемента html).
html { font-size: 16px; } p { font-size: 1.5rem; }
В приведенном выше примере rem равен 16px (так как это значение наследуется у html-элемента) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.
Эта единица измерения поддерживается следующими браузерами:
Chrome Safari Firefox Opera IE Android iOS
Работает Работает Работает Работает 10+ Работает Работает
.element { font-size: 20ex; }
1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px, а все остальные размеры определяются высотой x определенного шрифта.
Посмотреть демо
Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS.
.element-one { font-size: 100vh; } .element-two { font-size: 100vw; } .
Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:
1vw = 1% от ширины окна просмотра;
1vh = 1% от высоты окна просмотра.
То есть, если мы посмотрим на следующий пример:
.element { font-size: 100vh; } }
то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh — 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:
Посмотреть демо
vw-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:
Посмотреть демо
Эти единицы измерения поддерживаются следующими браузерами:
Chrome Safari Firefox Opera IE Android iOS
31+ 7+ 31+ 27+ 9+ 4.4+ 7.1+
В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw, и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.
Единица измерения ch чем-то похожа на ex, и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:
Посмотреть демо
Эта единица измерения поддерживается следующими браузерами:
Chrome Safari Firefox Opera IE Android iOS
27+ Работает 10+ Работает 9+ Работает Работает
Данная публикация представляет собой перевод статьи «Font-size» , подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
Почему em? / Хабр
Это перевод заметки Криса Койера Why Ems? на css-tricks.com.
Я долгое время применял px для установки font-size, из-за чего размер шрифта не мог меняться в Internet Explorer 6-8. Переход на em имеет ряд преимуществ, и в этой статье они детально рассмотрены.
Изменение размеров шрифтов на разных экранах

Это основная проблема «пиксельных» размеров. К примеру, в CSS-стилях сайта font-size разных элементов типографики задан 50 раз в пикселях. В этом случае, используя media queries для масштабирования, придется настраивать каждый из этих 50 font-size. Однако если задавать размеры в em, то потребуется внести изменения только в теге body и свойство будет наследоваться:
body { font-size: x-large; } @media (max-width: 1000px) { body { font-size: large; } } @media (max-width: 500px) { body { font-size: medium; } }
Разные пиксели

Значение px — это не то же самое, что физический пиксель экрана. Подробнее о разнице написано в статье CSS px is an Angular Measurement.
Относительные отступы

Предположим, что необходимо использовать картинки-иконки в текстовых заголовках сайта, которые должны иметь определенные отступы для корректного отображения. Нельзя использовать конструкции вроде padding-left: 20px, потому что эти 20 пикселей постоянны и не будут изменяться в соответствии с размером шрифта. А если указать отступы в em, то они станут относительными.
Связи

Вообще, если все размеры в CSS задавать в em — font-size, margin, padding, то между дизайном и типографикой будут более гибкие связи — станет гораздо проще вносить правки без ущерба внешнему виду.
Ложка дегтя

Все же у em есть несколько неприятных недостатков, например «каскадность»: если задать элементам обычного списка (li) font-size: 1.1em, то дочерние (вложенные) элементы будут суммировать это значение. Решить проблему можно применением li li { font-size: 1em; }, однако это очень муторно. Тут может помочь назначение размеров шрифта в rem, однако не все браузеры поддерживают этот способ (IE 9+).
em против пикселей против pt против процентов / Хабр
Одним из наиболее запутанных услуг CSS является применением font-size атрибута для масштабирования текста. С помощью CSS вы можете изменить размер текста в браузере с помощью четырех разных измерений. Какая из этих четырех лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

Знакомьтесь — единицы

1.«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «Em» равно текущему font-size, например, если font-size в документе 12pt, 1em равно 12pt. «Em» масштабируема по своей природе, так 2em будет равно 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становится все более популярным в веб-документах из-за масштабируемости и возможности с пользой использовать в мобильных устройствах.
2. Пиксели (px): «px» имеют фиксированный размер единиц, которые используются на экране (например, для чтения на экране компьютера).Один пиксель равен одной точке на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального (безупречного до пикселя) представления своего сайта, желаемого в браузере. Одна из проблем, использование с px заключается в том, что эти единицы не используются для масштабирования слабовидящих устройств или мобильных устройств.
3. Очки (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1/72 дюйма. «Pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Проценты (%): Единицы измерения в% похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании «%» ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (доступность).
Итак, в чем же разница?

Легко будет понять разницу между единицами font-size, когда вы увидите их в действии.Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.

Изменение размера шрифта от 100% до 120%.
Как вы видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым, но лучше для ваших посетителей использовать масштабируемый текст, который может быть любой отображен на любом устройстве или машине.По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.
«em» vs «%»

Мы заставляем нас использовать «px» и «pt», не лучшим образом, подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют несущественные различия.
В приведенном выше примере мы использовали в качестве основного элемента font-size проценты (в тэге тела). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть есть body {font-size: 1em;}), вы, должны бы не заметить разницы.Давайте посмотрим, что происходит, когда «1em» использует наш клиент «Размер шрифта» в настройках своего (такая возможность предоставлена в многих браузерах, например, Internet Explorer).

Размер шрифта, когда клиент изменяет размер текста в браузере.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если эксперт, разница становится очень большой.При установке «наименьших» «em» гораздо меньше, чем «%», а при установке «« наибольших »наоборот« em »отображается гораздо большим, чем«% ». И хотя утверждают, что единицы в «em» масштабируются, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.
Вердикт

В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей последовательно и удобно.При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.
Победитель : процент (%).
.
Единицы измерения CSS для font-size: px,%, em, rem, vw, vh, vmin, vmax
Всем привет! Меня зовут Анна Блок, и сегодня мы поговорим про единицу измерения в CSS. Наверняка, многие из вас знают о таких, как px и%. Однако, помимо всего прочего, мы разберем, как работают rem, em, vh, vw, vmax и vmin.
Cтатья получится большой, поэтому разобьем её на две части. Здесь мы поговорим о том, как эти единицы измерения влияние на размер шрифта, т.е на font-size.Во второй части затронем тему, насколько удобно использовать такие параметры, как заполнение, поля, высота, ширина и радиус границы.
Специально для вас я создаю интерактивную шпаргалку, где наглядно отображены основные единицы измерения. Вы можете менять значения по мере прочтения статьи, чтобы материал лучше усваивался.
пикселей
Давайте начнем с самого распространенного — px (c англ. Пикселей). Пиксель — это базовая, абсолютная и окончательная единица измерения.Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.
Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс box-px за счет которого мы и будем стилизовать текст, который находится внутри.

Пиксели

размер шрифта: 16 пикселей

размер шрифта: 8 пикселей

размер шрифта: 32 пикселя

Обратите внимание, основные изменяются.На всю основную стилизацию влияет класс, который стоит после box . Например, если просмотреть код CSS, можно увидеть стилизацию .box-px .text-1 .
.box-px .text-1 { размер шрифта: 16 пикселей; }
На этом примере видно значение font-size: 16px , что есть то, что написано в классе text-n , то и дублируется в CSS. Это сделано для наглядности. Вы должны понимать, что большинство браузеров по умолчанию значение font-size: 16px .Если убрать свойство .box-px .text-1 , то визуально ничего не изменится. При этом если мы вернем свойство назад, то тоже ничего не изменится, потому что это значение заложено по умолчанию в браузере. Однако, все что мы стилизуем далее — видоизменяется:
.box-px .text-2 { размер шрифта: 8 пикселей; } .box-px .text-3 { размер шрифта: 32 пикселя; }
Если мы используем значение меньше 16px, то наш текст уменьшается. И наоборот: если мы будем использовать значение больше, то текст увеличится.Звучит логично, не так ли? Но как работают другие единицы изменения? Давайте разбираться дальше.
процентов
Следующее значение, которое мы рассмотрим это проценты (%). Вы же помните, что браузер по умолчанию использует значение 16px? Это значит, что все относительные единицы, которые мы будем использовать в дальнейшем тоже будут преобразовываться в проценты. Но мы этого с вами не увидим, т.к. эти процессы будут проходить внутри.
Значение процента высчитывается относительно значения свойств родительского тега.Это значит, что если текст будет вложенным, то его значение будет меняться в зависимости от того тега, который он вложен. Давайте рассмотрим это наглядно. Напишем, тег p , внутри которого будет находиться тег span , и внутри которого находится еще один span

Lorem LoremLorem

Для тега p добавим следующее:
p { размер шрифта: 100%; }
Если мы были браузерами, то высчитали значение font-size: 16px .Далее переходим к пролет . Стилизуем его:
p> span { размер шрифта: 50%; }
Мы увидим, что вложенный span и тот span , который находится внутри него, стали равнозначны значению 8px. Как мы это посчитали? Итак, font-size: 100% = 16px и если мы берем половину, то есть 50%, то половина этого значения и будет значение 8px.
Теперь давайте стилизуем еще большую вложенность:
p> span> span { размер шрифта: 400%; }
Если бы мы указали здесь значение 200%, вышло бы, что мы взяли 2 раза по 8px, складываем 8px + 8px = 16px.Если мы укажем здесь 400%, то здесь у нас станет значение в два раза больше, то есть есть 16px * 2 = 32px.
Ознакомиться подробнее с HTML и CSS можно тут:
Em
Давайте снова вернемся к нашему первому шаблону и поговорим про такую единицу измерения, как им. Выясним, как будет вести себя данное значение, если вместо пикселей мы будем указывать относительную единицу em. Для этого создадим пример, в котором внутри box будет содержаться два текста. Один будет обернут в div , другой — во вложенном div с классом post .

Lorem Ipsum
Lorem Ipsum

По умолчанию body равенство font-size: 16px . Далее стилизуем пост :
body { размер шрифта: 16 пикселей; } .после { размер шрифта: 1.2em; }
Чтобы вычислить значение после , вы можете взять в руки калькулятор, либо (если вы используете систему macOS) набрать комбинацию CMD + пробел, открыть окно ввода для вычислений.Итак, нам необходимо умножить 16 на 1.2. Итого у нас получится 19.2. Это значит, что браузер выведет текст post , как 19.2px. Такую относительную единицу измерения удобнее использовать, если вам нужно изменить значение в body, например, поставить значение 30 пикселей. И тогда значение в сообщение будет вычисляться автоматически, то есть умножаться на 1.2. При этом если бы вы работали с пикселями и написали бы в сообщение 30px, а в теле в другом написали 50px, то вы не изменились в значении post и, соответственно, вам бы пришлось сделать все это вручную.
Ознакомиться подробнее с HTML и CSS можно тут:
Давайте снова вернемся к интерактивной шпаргалке. Мы можем проверить, какие единицы измерения работают в связке с телом. Например, если добавить в блоке CSS,
body { размер шрифта: 30 пикселей; }
то мы сразу увидим, какие значения меняются. Например, пиксели не изменились совершенно, но при этом у нас изменился блок «проценты» и «em».
Единица измерения rem, не зависит от тела, и это первое ее отличие от em.
Вложенность
Итак, пока мы полностью не перешли к теме rem, давайте рассмотрим еще один пример связанных со вложенностями. Самый удобный пример, связанных с вложенностями — это списки, поэтому давайте будем работать с ними.

Первый уровень

Второй уровень

Третий уровень

Четвертый уровень

Давайте для тега ul , зададим значение 0.8em:
ul { размер шрифта: 0.8em; }
Первая проблема, которую мы видим, — каждая последующая вложенность становится меньше и кратна значению родителя. При этом, если мы используем больше единицы, например 1.8em, каждая последующая вложенность увеличивается относительно предыдущего уровня. Эту проблему можно решить, но этот метод не совершенен:
ul { размер шрифта: 0.8em; } ul ul { размер шрифта: 1em; }
В этом случае каждый последующий уровень выравнивается в значениях, но это лучше всего его решать при помощи единицы измерения rem.Именно о ней мы и будем дальше говорить.
Рем
Итак, как вы уже поняли, оно взаимодействует с основным корневым тегом html . У корневого узла есть особый селектор псевдокласса, который записывается как : root . В данном случае rem это и есть сокращение от слов «root em», то есть «основной em». Если вы работаете с rem, то вы должны помнить, что его значения относительны к текущему элементу, а к корневому.В данном случае не важно, где вы используете значение rem, оно никак не будет влиять на остальные значения.
Если мы вернемся к предыдущему примеру с вложенностями, то в данном случае, если мы напишем rem, эта проблема отпадёт. Вы так же можете использовать значения больше единицы, и при этом уровни не видоизменятся. Они используют те же значения, что и первый элемент.
Ознакомиться подробнее с HTML и CSS можно тут:
Если вернуться к небольшому примеру где мы рассматривали их, то мы можем скопировать box и написать box-rem , что сделать отличие в классах:

Lorem Ipsum
Lorem Ipsum

Если в стилех запишем
.box-rem .post { размер шрифта: 1,2 бэр; }
то увидим, что это значение никак не видоизменится, т.к. первый «Lorem Ipsum» записан вне тегов. Он меняется по отношению к body, но при этом, если мы запишем селектор : root
: root { размер шрифта: 50 пикселей; }
то мы увидим, что значение post меняется относительно этого сектора.
Ознакомиться подробнее с HTML и CSS можно тут:
Давайте создадим еще один пример и поговорим о некоторых тонкостях использования rem.Давайте снова создадим box , внутри которого будет содержаться тег h3 и p

На главную

Ваш текст lorem ipsum жаждет чего-то более подозрительного? Попробуйте наш генератор ... это подозрительно!

То, что я сейчас покажу — это анти-пример и я не советую применять на своих проектах. И в конце я объясню почему.
Итак, запишем селектор : корень .
Заодно давайте поговорим о том, как вычислить 10px с точки зрения em. Для этого открываем калькулятор. Что бы вычислить, сколько будет 10px, мы делим 10 на тот размер, который у нас установлен по умолчанию, то есть на 16px. Итого у нас получается значение 0,625. Давайте запишем:
: root { размер шрифта: 0,625em; / * = 10 пикселей * / }
Далее давайте будем стилизовать х3 . Начнем вычислять размер шрифта с точки зрения для этого нам необходимо 14 разделить на 10 и выходит 1.4рем
h3 { размер шрифта: 1,4 бэр; / * = 14 пикселей * / }
Этот метод удобен тем, что нам не потребуется прибегать к вычислениям. Всё это возможно вычислить в уме. Но я предлагаю сделать заголовок сделать все-таки чуть больше, например, 24px. В rem значении это будет 2.4rem.
h3 { размер шрифта: 2,4 бэр; / * = 24px * / }
Как вы видите, по умолчанию, если я не буду стилизовать p , либо какие-то другие элементы, которые будут отображаться на странице, например:

Lorem
Lorem
Lorem

— все они автоматом будут иметь размер шрифта 10px.Размер шрифта , размер шрифта , из-за чего файла документа CSS значительно увеличен. В данном случае приходиться чем-то жертвовать и как мне кажется, использовать такой метод нецелно.
Если вы не хотите использовать размер шрифта 10px по умолчанию, то вы можете использовать другое значение — 14px. Чтобы вычислить, сколько это будет в rem, для этого нужно 14px / 16px.Итог: 0,875рем
: root { размер шрифта: 0,875em; / * = 14 пикселей * / }
Теперь мы видим, что текст по умолчанию стал читабельным. Заголовок увеличился, потому что 2.4rem это уже не 24px. А сколько? Давайте посчитаем: 24px / 14px = 1.71rem. Давайте запишем:
h3 { размер шрифта: 1,71 бэр; / * = 24px * / }
В таком случае размер заголовка у нас стал таким, как тогда, когда у нас font-size составлял 10px. Конечно же, такое значение не вычислить в уме, однако работы с кодом по итогу будет значительно меньше.
Давайте предположим, что мы работаем с медиа-запросами. Например, размер шрифта нам нужно сделать чуть большедля планшетов и ПК устройств. То есть если мы будем использовать media-запросы то внутри, мы можем записать min-width: 768px и внутри media мы запишем селектор: root с величиной font-size: 1em, то есть 16px:
@media (min-width: 768px) { : root { размер шрифта: 1em; } }
Таким образом, при увеличении экрана у нас размер шрифта становится больше, заголовок тоже автоматически становится больше, при этом, если вам нужно его подкорректировать, это тоже может сделать в медиа запрос, но в целом много стилей вам менять не требуется.И это на самом деле удобнее, чем, если бы вы работали с простыми пикселями. Потому что если бы вы работали с пикселями, то вам потребовалось бы менять значение, чтобы сохранить соотношение.
Ознакомиться подробнее с HTML и CSS можно тут:
VW / VH
Теперь давайте перейдем к следующим значениям. Это устройство измерения устройства к размеру экрана. Все те значения, которые начинаются с буквы V, имеют себе сокращение слова с английского «viewport» (пер.на русский «область просмотра»). Итак:
vh = 1/100 высоты области просмотра
vw = 1/100 ширины области просмотра
vmin = 1/100 наименьших высоты или ширины области просмотра
vmax = 1/100 просмотраих высоты или ширины области
Последние два значения, еще не так хорошо поддерживаются браузерами, поэтому будьте осторожны, если захотите использовать их на своих проектах.
, если рассмотреть пример, который мы видим здесь, и начать уменьшать экран, то можно увидеть, как vw уменьшиться по ширине.При этом vh зависит от высоты, поэтому его значения никак не меняются. Если изменить высоту экрана, то можно увидеть, что значения в блоке vh меняются в зависимости от высоты, а vw совершенно никак не реагирует. Запись
.box-vw .text-1 { размер шрифта: 2vw; }
значит, что на экране монитора, у которого значение 1200px, элемент будет равен 24px. Откуда берется это значение? Это 2% от 1200px, то есть 1200px * 0,02 = 24px. При этом если взять, например, планшет, который в среднем составляет 768 пикселей, то размер шрифта составляет примерно 15 пикселей, то есть это 2% от 768 пикселей.
Значения vmin и vmax не применимы к font-size их уже рассмотрим в следующей части, но знайте, что эти значения есть и они работают в связке с vw и vh, однако их можно использовать не всегда, а только в том случае если они необходимы. И не забывайте про поддержку этих значений.
Я надеюсь, эта статья тебе помогла разобраться с тем, для чего используется каждая единица измерения в CSS.
Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.
Смотреть видео:

.
Сила измерения в CSS
При работе с CSS всегда наступает такой момент. Несмотря на то, что я довольно хорошо понимаю единицу измерения em CSS, по-настоящему прочувствовал их силу только после того, как прочитал запись Simurai. В этой статье я собираюсь использовать его опыт.
В CSS единица измерения соответствует текущему размеру шрифта элемента, к используемому классу шрифта. Когда единицы измерения используются в дочерних элементах, которые не имеют определенного размера шрифта, они наследуют от родителей, до корневого элемента документа.
Посмотрите на следующий код CSS:
.example { размер шрифта: 20 пикселей; }
В данном случае 1em этого или его дочерних элементов (при отсутствии других определений font-size) будет равно 20px. Так что, если мы добавим строку:
.example { размер шрифта: 20 пикселей; радиус границы: .5em; }
Значение border-radius равное 5em будет равно 10px (то есть есть 20 * 0,5). Аналогично:
.example { размер шрифта: 20 пикселей; радиус границы: .5em; отступ: 2em; }
Значение отступа 2em будет равно 40px (20 * 2).Как уже упоминалось, этот тип вычислений используется к любому дочернему элементу определенного размера, если у него нет явно определенного размера шрифта. Тогда величина измерения em в CSS будет вычислена подобным образом.
Если в CSS размер шрифта не определен, то будет соответствовать размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16 пикселей. Давайте рассмотрим, как можно использовать этот метод для легкого изменения размеров элементов.
Понятие «компоненты» довольно популярно сейчас.Оно хорошо подходит для модульных методов CSS, а также для идей инкапсулированных разделов кода в целом. И я предполагаю, что следующий метод будет еще более интересным, когда веб-компоненты получат широкую поддержку.
Метод работает следующим образом: используется свойство font-size, которое создает основную единицу для различных элементов внутри модуля. Параметр «размер шрифта» родительского элемента, который делает весь компонент, легко редактируемым путем изменения свойства-размер шрифта родительского элемента.
Давайте посмотрим на это в действии:
Посмотреть демо
Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме. Слайдер содержит одно значение корневого элемента компонента: значение font-size.
Следует отметить, что установка размеров компонента через одно свойство CSS не обязательна, пользователь может менять размеры в настройках.Это сделано для того, чтобы разработчик мог быстро внести изменения, не перебирая различные значения во всех частях компонента.
Когда размер изменяется, это сказывается на всех em CSS значениях родительского элемента, а также всех его дочерних элементов, выполняемых все части компонентао гибкими.
Обратите внимание, что:
Внутри компонента все размеры задаются с помощью em. Кроме внешней границы и изображения, которое при желании можно изменить, но меня устраивает размер, который в данном случае статичен;
Значок в верхнем верхнем углу, похожий на слезинку — это псевдоэлемент, который аналогичным образом использует размер шрифта родительского элемента;
CSS также включает в себя два медиа-запроса, которые корректируют размер шрифта родительского элемента.Что показывает полноценный запрос этого метода, что не нужно менять все размеры в медиа-запросах, а только размер шрифта.
Некоторые замечания, упущения и т.д.
Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.
Возможно, вам придется подправить некоторые значения единицы измерения в CSS. Вы вряд ли захотите изменить размер в случае с границей родительского элемента.Так как свойство ко всем элементам. Можно решить эту проблему, просто избегая em элементов, которые хотите сохранить.
Не нужно использовать пиксели, чтобы установить размер шрифта. Вы можете использовать для этого em, но помните, что эти единицы будут передаваться по наследству от родителей.
Единица rem в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент.Таким образом можно использовать rem. Это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.
Что касается препроцессора Sass, то это уже второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в коде Sass, и наследование будет работать таким же образом.
Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов. Этот метод убедительно доказывает, насколько мощным средством является единица измерения в CSS.
Данная публикация представляет собой перевод статьи «The Power of em Units in CSS», подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
.
Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»
Данная статья учебника посвящена вопросам, включая управление размером шрифта в CSS, в том числе основные ключевые слова. Рассмотрено применение всех единиц современного стандарта: дюйммы , сантиметры , миллиметры и четверь миллиметра , пики процент , точек , пикселей , ные значения 0004, единица , rem , еx , ch и масштабируемые величины относительно экрана — vw , vh , vmin и vmax .
Для визуализации веб-страниц, вы можете управлять размером шрифта по своему усмотрению, к примеру, увеличивать шрифт для той информации, которую необходимо акцентировать внимание пользователя, либо уменьшить шрифт, если информация, по Вашему мнению, не является приоритетной.
CSS за установку размера шрифта отвечает за свойство font-size, которое имеет поддержку всех браузеров. Свойство font-size записывается следующим образом:
Селектор { font-size: значение с единицей измерения величины; {
Обращаю ваше внимание, что при использовании свойств font-size необходимо всегда указывать положительные единицы измерения величины, при этом вы не должны указывать положительные единицы измерения:
p { размер шрифта: 10 пикселей; / * установить размер шрифта 10 пикселей для всех абзацев * / {
В CSS 3 существует разнообразный набор для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.
Абсолютные величины
Физические единицы:
Дюймы (дюйм), 1 дюйм = 2,54 см (сантиметры) = 96 пикселей (пиксели).
Сантиметры (см), 1см = 96px / 2,54.
Миллиметры (мм), 1мм = 1/10 от 1см.
Четверть миллиметра , (q) 1q = 1/40 от 1см.
Пики (шт), 1шт = 1/6 от 1 дюйма, 1шт = 12pt = 1/6 дюйма.
Пункты (пт), 1 пт = 1/72 дюйма.
Как вы можете заметить, к абсолютной величине дюймы, сантиметры, миллиметры, пики и области. Как правило, абсолютные используются только в печати (предназначены для использования совместно с выводами), так как отображение информации будет отличаться в зависимости от монитора, поэтому они очень скудное применение на веб-страницах.
В некоторых случаях, если вам необходимо составить таблицу стилей, для тех страниц сайта, которые предназначены не только для просмотра, но и для печати, вы можете использовать другие варианты, в случаях использование этих нежелательно .Пример подготовки веб-страниц к печати требуется получить более обширные знания CSS.
Визуальные единицы:
Пиксели (px), 1px = 1/96 от 1 дюйма (дюйма).
кузов { размер шрифта: 16 пикселей; / * установить размер шрифта 16px для всего видимого содержимого * / }
Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек.Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя. Конечное отображение информации происходит именно в пикселях, которые подгоняет веб-браузер пользователя.
С помощью мобильных устройств, нам доступны экраны, которые содержат большое количество пикселей, но при этом сами по себе намного меньше настольных мониторов, в этом случае для обеспечения комфортного чтения с экрана браузера можно использовать масштабирование.
К недостаткам использования размера размера относится то, что они не позволяют масштабировать для слабовидящих пользователей.
Относительные единицы
Процентные значения.
Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средств CSS, браузер применит к тексту свои значения «по умолчанию». В большинстве случаев находящийся вне заголовков отображается высотой 16 пикселей (базовый размер шрифта текста).
html { размер шрифта: 16 пикселей; }
Как вы можете догадаться, процентные значения высчитываются относительно свойства значения родительского элемента.Независимо от основного размера шрифта, он будет эквивалентен 100%.
Давайте рассмотрим пример. Допустим, у всех параграфов (элемент
) установлен базовый размер шрифта 16px и мы хотим показать в одном параграфе определенную информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для отдельных блоков описаний (стили):
Пример использования процентных значений <стиль> .halfFontSize { размер шрифта: 50%; } .doubleFontSize { размер шрифта: 200%; }
Обычный параграф на странице

Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.

Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента.

Результат нашего примера:
Рис.51 Пример использования процентных значений.
В данном базовом примере размер шрифта текста не изменен, и расчет процентных значений происходил следующим образом для параграфов:
Первый параграф: 16px * 100% = 16px Второй параграф: 16px * 50% = 8px Третий параграф: 16px * 200% = 32px
При работе с процентными значениями обратите внимание на то, что все вложенные элементы наследуют и используют их для своих вычислений размеров шрифтов. Что это значит, разберем в примере:
Пример наследования процентных значений <стиль> div { размер шрифта: 12 пикселей; / * устанавливаем базовый размер шрифта для всех блоков
* / } .doubleFontSize {/ * установить размер шрифта в два раза больше чем родительский * / размер шрифта: 200%; } .doubleFontSize> div {/ * использовал селектор дочерних элементов, который устанавливает, что все вложенные элементы
внутри элемента
с классом doubleFontSize получат размер шрифта в два раза больше чем родительский * / размер шрифта: 200%; }
Родительский div 12px
Блок, к которому применен стиль с размером шрифта 200% от родительского элемента.
Блок, который наследует значение

Результат нашего примера:
Рис.52 Пример наследования процентных значений.
В данном примере для вложенного блока
с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок
, для которого мы установили размер шрифта 12px .
Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:
12 пикселей * 200% = 24 пикселя
Если бы мы не изменили значение размера шрифта для блока
, то расчёт бы происходил исходя из базового шрифта:
16px (базовый размер шрифта) * 200% = 32px
Кроме того, мы использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы
внутри элемента
с классом doubleFontSize получат размер шрифта в два раза больше чем родительский.
Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px , а значение в 200% равно 48px , т.к. расчёт происходит исходя из размера шрифта родительского элемента:
размер шрифта родительского элемента * 200% = 48px
Единица измерения еm.
Em является стандартной единицей измерения в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро.Это касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.
Если вы внимательно отнеслись к изучению использования и наследования процентных показателей.
В CSS значение em относится к базовому размеру шрифта текста . Сейчас вы можете подумать, что алгоритм работы значения и функционируют аналогично с процентными значениями и практически правы.
Например:
базовый размер текста = 1em = 100% базовый размер текста * 2 = 2em = 200% базовый размер текста * 0.5 = 0.5em = 50%
Обращаю Ваше внимание, что при работе, как с процентными значениями , так и со значениями em , вложенные элементы наследуют значения и используют их для вычислений своего размера шрифта.
Пример использования значений em
размер шрифта: 0.8em

font-size: 80%

font-size: 1.5em

font-size: 150%

font-size: 1.8em

font-size: 180%

Результат нашего примера:
Рис.53 Пример использования значений em.
Многие создатели сайтов выбирают именно единицы измерения при создании своих таблиц стилей.
Единица измерения рим.
Стандарт CSS 3 подарил нам новую относительную единицу измерения rem , сокращение от Root em — значение на основе размера текста корневого (корневого) элемента.
Основное отличие от em заключается в том, что размер текста задается от базового размера корневого элемента , а не текущего размера шрифта родительского элемента. Чтобы окончательно понять, давайте рассмотрим сравнение на примерах:
Пример наследования значений em <стиль> div { размер шрифта: 1.25em; }
Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6

В данном примере, мы вложили блоки один в другой и установили значение размера шрифта равным 1.25em. В результате сработали правила наследования стилей и для каждого последующего вложенного блока, родительский блок становится базовым, что в дальнейшем сказывается на расчете размера шрифта, исходя из размера шрифта родительского элемента.Как вы понимаете, с каждым вложенным блоком увеличенный размер шрифта.
Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂
Рис.54 Пример наследования значений em.
Оставим единицу измерения и рассмотрим этот же пример с использованием единицы rem.
Пример использования значений rem <стиль> div { размер шрифта: 1,25 бэр; }
Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6

В данном примере, мы вложили блоки один в другой и установили значение размера равным 1.25рем. В результате, как можно заметить, размер каждого блока, это происходит по причине, что размер текста рассчитывается из размера корневого (корневого) элемента, а не родительского элемента.
В этом и заключается замечательная особенность этой единицы, которая представляет для тех, кто не готов бросить вызов неожиданно появившихся наследований стилей.
Рис.55 Пример использования значений рем.
Обе вышерассмотренные единицы имеют широкое применение среди разработчиков, но при этом имеют как сильные, так и слабые стороны.С вы определите для себя те вопросы, когда необходимо использовать ту или иную единицу измерения в зависимости от возникших обстоятельств.
Единица измерения еx.
Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x» . Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.
В большинстве шрифтов высота прописной «x» соответствует 0.5em . Если браузер не может определить размер прописной «x» , то в этом случае будет установлено значение 0.5em .
Единица измерения ч.
Единица измерения ch зависит от того шрифта, который вы используете, так как его размер рассчитывается из ширины символа ‘0’ ( ноль , символ Юникода U + 0030 ). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданными символами, которые он может вместить:
.width50 { ширина: 50ч; / * ширина блока равняется 50 символов (необходим моноширинный шрифт) * / }
Если браузер не может определить размер «0» , то в этом случае будет установлено значение 0.5em.
Масштабируемые величины относительно экрана
С развитием стандарта каскадных таблиц стилей доступны такие единицы измерения, которые позволяют установить размеры окна пользователя (просмотра области).
Область просмотра (область просмотра) это то место, где браузер отображает сайт минус зарезервированное пространство .
В CSS 3 существуют 4 ( четыре ) различных единиц измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:
1vw ( ширина области просмотра ) = 1% от ширины области просмотра . При увеличении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если ширина области просмотра 1000px , то 1vw будет 10 ( десяти ) пикселям.
1vh (высота окна просмотра ) = 1% от высоты области просмотра . При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если высота области просмотра 500px , то 1vh будет 5 ( ) пикселей.
Рассмотрим пример:
Масштабируемые единицы измерения <стиль> * { маржа: 0; / * внешние отступы для всех сторон * / } .viewportHeight30 { размер шрифта: 5vw; / * размер шрифта * / ширина: 100ввт; / * ширина блока * / высота: 30vh; / * высота блока * / цвет фона: оранжевый; / * цвет заднего фона * / } .viewportHeight50 { размер шрифта: 4vw; ширина: 75вв; высота: 50vh; цвет фона: желтый; } .viewportHeight20 { размер шрифта: 3vw; ширина: 50вв; высота: 20vh; цвет фона: красный; }
размер шрифта: 5vw; ширина: 100ввт; высота: 30vh;

размер шрифта: 4vw; ширина: 75вв; высота: 50vh;

размер шрифта: 3vw; ширина: 50вв; высота: 20vh;

В данном примере области мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого — 5vw (5% от ширины просмотра), для второго — 4vw, для третьего — 3vw), ширину блоков (для первого — 100vw (100 % от ширины области просмотра), для второго — 75vw, для третьего — 50vw) и высоту блоков (для первого — 30vh (30% от высоты области просмотра), для второго — 50vh, для третьего — 20vh).
Попробуйте размер окна. Как видите, пропорции соблюдены для всех заданных параметров.
Чтобы избавиться от полосы прокрутки, мы установили универсальный селектор * , который выбирает все элементы и убирает внешние отступы у всех элементов. Это происходит по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw увеличивают полосу прокрутки, чего не может быть (этот баг возникает при переполнении: auto — свойство, которое отвечает за переполнение элемента содержимого, установленное по умолчанию).
Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».
Результат нашего примера:
Рис.57 Масштабируемые единицы измерения.
Минимальное и максимальное значение просмотра
Заключительные единицы измерения, которые мы рассмотрим в этой статье, это vmin и vmax . Обратите внимание на то, что эти значения могут принимать как значения высоты, так и ширины области просмотра:
1vmin = 1vw или 1vh.Выбирает минимальное значение между высотой и шириной области просмотра .
1vmax = 1vw или 1vh. Выбирает максимального значения между высотой и шириной области просмотра .
Давайте рассмотрим, в чем разница между vmin и vmax на следующем примере:
.viewport Мин. {. viewportMax { ширина: 40вмин; ширина: 40вмакс; высота: 40вмин; высота: 40vmax; }}
Vmin и vmax c масштабируемыми единицами измерения <стиль> * { маржа: 0; } div { дисплей: встроенный блок; / * элементы
блочно-строчные (выстраиваем в линейку) * / цвет белый; / * цвет шрифта * / } .viewportMin { ширина: 40вмин; / * ширина блока * / высота: 40вмин; / * высота блока * / цвет фона: черный; / * цвет заднего фона * / } .viewportMax { ширина: 40вмакс; / * ширина блока * / высота: 40vmax; / * высота блока * / цвет фона: синий; / * цвет заднего фона * / }
viewportMin
ш и в - 40 об / мин

viewportMax
w & h - 40vmax

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display: inline-block), как и в прошлом примере убрали все внешние отступы своим полем со значением 0.
Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin. Это означает, что выбирается минимальное значение между высотой и шириной окна устанавливается 40% . В нашем случае разрешение окна было 400 пикселей ширина и 700 пикселей высота. В этом случае минимальное значение 400 пикселей и браузер выбирает его. Ширина высчитывается как:
400 пикселей (текущее минимальное значение области просмотра) * 40% = 160 пикселей
Для высоты расчёт аналогичен:
400 пикселей (текущее минимальное значение области просмотра) * 40% = 160 пикселей.
В итоге мы получили «квадрат Малевича».
Что касается второго блока с классом viewportMax , то все происходит с точностью да наоборот. Браузер определяет текущее максимальное значение области просмотра (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:
Ширина - 700 пикселей (текущее максимальное значение области просмотра) * 40% = 280 пикселей. Высота - 700 пикселей (текущее максимальное значение области просмотра) * 40% = 280 пикселей.
Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.
Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.
Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:
Отсутствует полная поддержка данных некоторых мобильных браузеров (например, Opera Mini и UC Browser для Android — полностью не база, IE Mobile — не поддерживает vmax, iOS Safari — стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия — некорректно работала единица измерения vh).
Internet Explorer и Edge не имеют полной поддержки единиц измерения :
IE работает только с версией 9.0 (поддерживает значение vm, вместо vmin).
IE 10, IE 11 не содержит значение vmax.
Edge 12, 13, 14 не содержит значение vmax.
Завершая эту большую тему, думаю стоит рассмотреть еще один способ как задать размер шрифта в CSS, а именно использование ключевых слов совместно со своим font-size.
Например:
и { размер шрифта: маленький; / * устанавливает размер шрифта маленького размера для всех элементов * / }
Полный перечень ключевых слов с расшифровкой размещен в следующей таблице:
Значение Описание
средний Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small Устанавливает размер шрифта маленького размера.Эквивалент 13px (пикселов).
x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
меньший Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
большой Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
больше Устанавливает размер шрифта большего размера, чем у родительского элемента.
Рассмотрим пример использования ключевых слов на странице:
Ключевые слова для управления размером шрифта <стиль> .средний {font-size: medium;} .small {font-size: small;} .x-small {font-size: x-small;} .xx-small {font-size: xx-small;} .smaller {font-size: less;} .large {font-size: large;} .x-large {font-size: x-large;} .xx-large {font-size: xx-large;} .larger {размер шрифта: больше;}
Блок с ключевым словом medium

Блок с ключевым словом small

Блок с ключевым словом x-small

Блок с ключевым словом xx-small
Блок с ключевым словом меньше

Блок с ключевым словом large

Блок с ключевым словом x-large

Блок с ключевым словом xx-large
Блок с ключевым словом крупнее

В нашем случае слово меньший (одноименный класс) устанавливает шрифт на один пиксель меньше , чем у родительского элемента с классом xx-small , а конкретное слово больше устанавливает шрифт на 6 пикселей больше , чем у родительского элемента ( хх большой ).
Результат нашего примера:
Рис.59 Использование ключевых слов для управления размером шрифта.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:
Практическое задание № 13
У нас имеются следующие стили, в элементах которых и элементы
, имеют размер шрифта 150%:
body, div {/ * создаем групповой селектор * / размер шрифта: 150%; / * устанавливает размер шрифта 150% * / }
Сделаем следующую разметку:
Текст внутри тела документа
Текст внутри блока
Текст внутри вложенного блока

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

После того, как Вы ответили на вопросы, самостоятельно составьте страницу с проверкой и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 14
У нас имеются следующие стили, в которых элементы и элементы
, имеют размер шрифта 1.5em:
body, div {/ * создаем групповой селектор * / размер шрифта: 1.5em; / * устанавливаем размер шрифта 1.5em * / }
Сделаем следующую разметку:
Текст внутри тела документа
Текст внутри блока
Текст внутри вложенного блока

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

После того, как Вы ответили на вопросы, самостоятельно составьте страницу с проверкой и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 15
У нас имеются следующие стили, в которых элементы и элементы
, имеют размер шрифта 1.5rem:
body, div {/ * создаем групповой селектор * / размер шрифта: 1,5 бэр; / * устанавливаем размер шрифта 1.5rem * / }
Сделаем следующую разметку:
Текст внутри тела документа
Текст внутри блока
Текст внутри вложенного блока

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

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

© 2016-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

.
No related posts.

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

Табл. 1. Относительные единицы измерения
Единица	Описание
em	Размер шрифта текущего элемента
ex	Высота символа x
px	Пиксел
%	Процент

Табл. 2. Абсолютные единицы измерения
Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

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