CSS от А до Я преимущества единиц измерения rem и em


Содержание материала:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29.11.2020, 14:46

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

Медиа запросы и единицы измерения
Хорошая ли практика использовать единицу измерения как vw для ВСЕГО на сайте. Размеры картинок.

Какие единицы измерения посоветуете использовать для CSS?
Здравствуйте! Недавно перешел на FullHD монитор и тогда я понял, что это достаточно больная тема. Я.

Что такое rem ?!
Вот столкнулся я с одними «заказчиками», они просят указывать размеры блоков rem.. А я не очень.

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

Единица измерения REM в CSS — общие сведения и способы применения

В CSS-правилах используется два варианта единиц измерения: абсолютные и относительные. Изначально была известна лишь одна абсолютная единица измерения – пиксель. Ее размер зависел от матрицы или монитора, и его было легко рассчитать самостоятельно.

Недостатки использования пикселей

Для верстальщиков, работающих на СМИ, на странице важно выделить именно контент. Он должен быть удобным для чтения, с оптимальной длиной строки и достаточного размера, чтобы даже пользователю с низким зрением было удобно воспринимать текст. Неважно, с какого устройства пользователь читает статью и насколько у него хорошее зрение – ему важно понять содержание статьи без специальных приспособлений. При использовании пикселей в верстке увеличение масштаба часто приводит к тому, что количество слов в строке уменьшается, появляются некрасивые переносы текста или же контент вовсе выпадает из контейнера. Поэтому веб-разработчики и дизайнеры начали использовать при написании кода проценты и относительные единицы измерения, такие как EM, REM. Но они до сих пор не смогли полностью вытеснить пиксели.

История появления относительных единиц

Так как изначально страницы в большинстве браузеров не масштабировались, пиксели долго оставались единственным вариантом описания размеров шрифтов. Но с развитием веб-технологий появилась необходимость в создании новых единиц измерения. Так появились EM и %, а затем и REM, значения которых были привязаны к стандартам браузера и обычно равнялись 16 пикселям. Существует эмпирическое правило, объединяющее базовые размеры шрифтов: 100 % = 1 em

14pt. Это означает, что, если не изменить размер шрифта в каких-либо дочерних элементах, по умолчанию в браузере он будет составлять около 16 пикселей и примерно 14пт (типографского пункта), но всегда 100 % и 1 EM.

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

Использование относительных единиц

Относительные единицы измерения, которые так распространены в типографике и CSS, – EM и REM – пока что менее известны рядовым пользователям, чем пиксели. Не каждый начинающий дизайнер или верстальщик понимает их назначение и использует правильно. Между профессиональными дизайнерами до сих пор ведутся споры, когда лучше использовать ту или иную единицу. Тем не менее относительные единицы значительно облегчают отзывчивую верстку и считаются наиболее эффективным методом при построении модульных компонентов. EM и REM применяются, чтобы задать размер различным элементам – заголовкам, границам, рамкам. Но их размеры высчитываются по-разному.

Что такое EM

EM – это относительная единица измерения, которая зависит от размера шрифта родительского элемента. Чаще всего его прописывают в правиле CSS для тега body. В этом теге задаются параметры всем элементам на странице. Как понимать единицы EM в CSS и вычислять их значение? Все достаточно просто. Если font-size (то есть размер шрифта) в селекторе body будет равен 10 пикселям, 1 EM тоже равен 10 пикселям, то есть верстальщик задает значение этой единицы самостоятельно. В результате все остальные размеры, заданные в EM, будут высчитываться исходя из этого значения. Тексты, параметры которых задается в пикселях и в относительных единицах, могут не отличаться визуально до тех пор, пока их не придется изменять. Но они очень удобны при создании гибких модульных блоков. Если не задать размер шрифта, но использовать в коде относительные единицы, они будут рассчитываться по умолчанию, и 1 EM окажется равен 16 пикселям.

Особенности единицы измерения EM

Существует еще одна особенность при использовании относительных единиц измерения EM. Если в селекторе установлен размер шрифта равный 2 EM, тогда при использовании EM в параметрах для другого свойства в этом же селекторе величина этой единицы будет применяться иначе. В результате размер элемента увеличится вдвое. Параметры EM рассчитываются исходя из размера шрифта в определенном блоке. То есть, если font-size в селекторе параграфа (тег «p») равен 2 EM, а для body он составляет 10 пикселей, тогда при добавлении в селектор тега p размера внешней границы текста («margin») толщиной 1 EM он будет равен уже не 10, а 20 пикселям.

Для того чтобы получить размер шрифта, равный 10 пикселям, нужно использовать 0,5 EM. Такие изменения значений в разных частях кода часто путают начинающих верстальщиков. Существовала также проблема с использованием EM в CSS – при установке размера шрифта 0.875 EM, каждый последующий вложенный элемент уменьшался. Нежелательные эффекты вызывало использование этой единицы и в margin-bottom. В этом случае размеры шрифты влияли на поля вокруг элемента, так как в EM непосредственно относился к этому параметру блочной модели.

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

Теперь рассмотрим, что такое единица измерения REM и как ею пользоваться. Первое упоминание о REM появилось в 2011 году в комментарии пользователя к статье немецкого разработчика Геррита ван Аакена об использовании пикселей в CSS–коде. Эта относительная единица по значению близка к EM, и его название переводится как «корневой EM», или Root Em. Поведение REM более предсказуемо. Применение этой единицы в верстке облегчает подсчет размеров элементов в различных частях кода, так как REM в CSS равняется значению размера шрифта, установленного для корневого элемента – тега HTML. Но чаще это значение добавляется также и в body, чтобы исключить ошибки с расчетами. Использование REM в CSS, если его значение не прописано в теге HTML, становится еще проще. 1 REM будет равняться стандартным 16 пикселям, как и в случае с EM, значение которого не установлено.

Споры об использовании REM в CSS. REM против EM

У REM и EM есть свои плюсы и минусы. Существует множество споров среди верстальщиков, какую относительную единицу измерения применять при написании кода. Есть мнение, что использование REM в CSS делает верстку менее модульной, а EM усложняют верстку и требует внимательного подхода и подсчетов. Каждый верстальщик в процессе работы сам выбирает для себя, какую единицу измерения и где применять. Но на начальном этапе предпочтительнее все же пиксели. EM предпочтительнее для элементов, свойства которых масштабируются исходя из font-size. В остальных случаях лучше подойдут REM.

Применение REM в заголовках

Рассмотрим, как будут меняться заголовки текстов (теги h1–h6), если их прописать в REM. Допустим, что у заголовка есть поля вокруг него – padding, фон и указанный размер шрифта. Если нужно будет увеличить заголовок, то пространство между краями элемента сократится, поэтому padding придется переопределять. Но тогда может возникнуть проблема с тем, что все элементы просто перестанут помещаться на странице. Но есть задать размер шрифта в пикселях, а затем в настройках браузера попробовать его изменить на более крупный, ничего не произойдет. При употреблении REM он будет увеличиваться и уменьшаться в зависимости от настроек пользователя.

Ограничения Root Em

REM помогает создавать каскадные таблицы с различным font-size для заголовков и абзацев. Он значительно упрощает верстку, так как не нужно изменять код полностью – достаточно поправить размер шрифта в теге html. Существует также ограничение в использовании этой единицы. В старых версиях браузеров Opera и IE и в некоторых браузерах для Android они до сих пор не поддерживаются. Поэтому разработчики вынуждены использовать пиксели в качестве запасного варианта и писать двойной код. Современные браузеры будут считывать строчки с размером шрифта в пикселях и переводить их в REM, а устаревшие просто не увидят код с неизвестной им единицей измерения. Но если забыть об этом и начать разрабатывать сайт под какой-то определенный экран, тогда можно потерять множество пользователей, которые просто не смогут воспринять контент, сломавшийся из-за использования REM или EM.

Новые способы задать размер текста

В списке единиц размера в CSS сейчас находятся не только вышеперечисленные варианты. Появились и новинки:

  • VW – равна 1/100 ширины браузера.
  • VMIN – 1/100 меньшей стороны окна браузера.
  • VMAX – 1/100 большей стороны окна браузера.
  • VH – равна 1/100 длины браузера.
  • EX – зависит от высоты буквы «х» в нижнем регистре.
  • CH – рассчитывается в зависимости от символа «0» в шрифте текущего элемента.

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

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

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

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

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

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

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

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

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

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

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

Топ-пост этого месяца:  Урок 24. JavaScript. Работа с Ajax

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Rem — масштабируемые единицы измерения

November 13, 2013

Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.

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

Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен — кратко и по делу, с необходимыми примерами.

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

Размер шрифта в rem

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

Наиболее популярны два метода определения размера шрифта:

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

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

Размер шрифта в

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer — даже IE9 — не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице — эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.

Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?

Размер шрифта в

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

Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.

Этот способ основан на задании основного размера шрифта для в процентах. В этом случае равен , вместо по-умолчанию.

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

Проблема с размерами шрифта в заключается в том, что такая система достаточно сложна при применении ее на практике. В примере, приведенном выше, размер шрифта элемента равен не 14px, а 20px.

Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.

Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:

Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?

Размер шрифта в

Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является , что является сокращением от “root em”. Давайте немного разберемся, что из себя представляет эта единица измерения.

Единица измерения является относительной к размеру шрифта элемента родителя, что приводит к эффекту наследования. Единица измерения является относительной к основному корневому элементу, то есть к html.

Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах ( ) относительно корневого элемента:

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

Но как насчет скудной поддержки этой единицы измерения в браузерах?

Вы будете сильно удивлены, но поддержка в браузерах достойная: Safari 5, Chrome, Firefox 3.6+ и даже Internet Explorer 9. Хорошая новость заключается в том, что в IE9 поддерживается изменение размера текста, установленного в единицах измерения . Увы, бедная Opera (вплоть до версии 11.10, по крайней мере), не имеет поддержки единиц измерения .

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

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

Декабрь 13 2011 — Opera 11.60 теперь поддерживает единицы измерения .

Конец статьи и перевода. В дополнение я могу сказать, что на сайте CSS Tricks также есть интересный материал по поводу .

В частности, на нем приведены удобные ‘ы для SASS, с помощью которых можно быстро задать размер шрифта в (с в ):

Пример использования этого SASS-mixin’а:

… что при компиляции в CSS будет выглядеть следующим образом:

И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):

А здесь представлен “полный” , с помощью которого можно одновременно задать кегль и . Удобная штучка — можно задать только размер шрифта и получить на выходе интерлиньяж и кегль в пикселях (и ‘ах):

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

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

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

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Всё относительно или использование rem в вёртске

Для тех, кто не в курсе, рассмотрим несколько единиц измерения, используемых в CSS:

  • px — математические пиксели (часто совпадают физическими). Здесь всё просто: 20px — это 20 точек на экране (если речь не про retina-экраны).
  • em — относительная единица измерения. Если у родительского элемента задан размер шрифта 16px, то при установке размера шрифта 2em дочернему элементу, получим буквы вдвое большей высоты (32px в абсолютном выражении).
  • rem — работает почти так же, как em, но с одой важной особенностью: размер рассчитывается не от размера шрифта родительского элемента, а относительно размера шрифта корневого элемента.

Если речь идёт об адаптивной вёрстке, то удобнее использовать относительные. единицы. Поэтому на сайте televizor-x.ru для задания большинства размеров элементов была использована единица rem. Причём не только для размеров шрифтов, а вообще для всех размеров.

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

  • Решается основная проблема em — неконтролируемое изменение размеров во вложенных элементах.
  • Все размеры можно выстаивать относительно одной цифры. Это позволяет лучше контролировать адаптивность и существенно сократить CSS.
  • Можно легко использовать rem наряду с другими единицами.
  • Старые (и не очень) браузеры не поддерживают rem.
  • Современные браузеры не совсем корректно поддерживают rem. Из-за этого одинаковые элементы могут различаться размером (обычно на один пиксель). Также в некоторых случаях элементы могут уехать при изменении размера окна. Эту проблему очень сложно решить, т. к. в разных браузерах используются разные алгоритмы преобразования rem в пиксели.
  • Каждый шрифт в некоторых размерах выглядит не совсем удачно. Могут понадобится дополнительные правки кеглей для конкретных элементов.
  • Единица не слишком проста для понимания. Поэтому велика вероятность её неправильного применения.

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

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

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

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

Pixels

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

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

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

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

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

Percent

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

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

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

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

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

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

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

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

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

Чтобы вычислить значение 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,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

VW / VH

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

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

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

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

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

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

Размеры шрифтов CSS. Пиксели vs Em vs Rem vs Проценты vs Viewport единицы

Если вы заинтересовались работой с единицами размеров в CSS, то вот статья Что такое единица гибкости fr в CSS, доступным и простым языком.

Очень много обсуждений велось по поводу пикселей, em, процентов, rem и какое свойство шрифтов когда использовать. Не смотря на более сотни статей в сети, эта тема может быть довольно запутанной, учитывая то, как использование этих свойств шрифтов разнится в зависимости от нужд наших проектов. Для примера, некоторые советуют не использовать фиксированные пиксели на базовом уровне (html и body элементы), так как пользователь не будет иметь возможности сбросить размер шрифтов под свои параметры. Но для людей типа меня, которые зависимы от bootstrap, это не благоразумно. Мы заканчиваем с фиксированными основными значениями в пикселях и начинаем создавать свойства шрифтов для всего проекта, отталкиваясь от основных пиксельных значений.

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

Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
Вы можете его поддержать через Яндекс.Деньги. Спасибо.

Пиксели

Перед наступлением эпохи адаптивного дизайна, пиксели широко использовались как единица размерности шрифтов для всего от типографики до ширины, отступов и высоты. Тем не менее, пиксели это единицы с фиксированным размером и они не меняются, основываясь на размере viewport или масштабности. Если вы хотите сделать адаптивный сайт, используя пиксели, то это может стать довольно сложным занятием, так как вам придется отслеживать все значения основанные на пикселях в CSS, включая значения в медиа запросах. Так какое же свойство шрифта мы можем использовать, чтобы делать минимальные изменения в нашем CSS, но оставаться масштабируемыми? И тут нам на помощь приходят em, rem, проценты и единицы viewport.

Em — гибкая масштабируемая единица, которая конвертируется браузером в пиксели. Если стандартный размер шрифта в Chrome равен 16px, то 1 em = 16px . Главное заблуждение по поводу em в том, что оно зависит от размера шрифта родительского элемента. Следуя спецификации W3, em относителен размеру шрифта элемента на котором их используют. Em широко используются для типографии, такой как заголовки, текста, параграфы и с элементами ассоциированными с ней, такими как внешние отступы и внутренние. Если вы выставите базовый размер шрифта для для html и body элементов в пикселях и свойства ваших типографических элементов будут определяться в с помощью em, для адаптивного дизайна все что вам нужно будет сделать это изменить стандартный размер шрифта на базовом уровне, например.

и все em значения будут автоматически пересчитаны.

Тем не менее, у em есть большое предостережение! Наследование! Для примера,

размером шрифта в 2em , что пересчитывается как 32px для

с размером шрифта в 0.5em , как результат у дива будет размер 16px , как у половины от 32px , а не 8px . И тут нам на помощь приходят rem.

rem относителен размеру шрифта корневого элемента( html элемент). Если размер шрифта html элемента равен 16px , то 1rem = 16px . Rem будет ВСЕГДА относителен корневому элементу, не полагаясь на вложенные элементы. Тем не менее, использование исключительно rem без em может повлечь свои проблемы в плане типографики, так как она может стать слишком большой или маленькой, что приведет к проблемам в масштабируемости.

Проценты

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

Проценты широко используются для выставления ширины и высоты контейнеров, дивов и для адаптивной графики.

Единицы viewport

Ширина и высота viewport свойств относительна ширине/высоте заданного размера viewport.

1vw = 1% ширины viewport

1vh = 1% высоты viewport

Viewport в данному случае означает размер окна браузера. Если вы хотите выставить размер элемента, основываясь на ширине viewport, а не на родительском/корневом элементе, то viewport единицы это то, что вам нужно. vw / vh единицы отлично работают с типографикой и широко используются там же.

Финальный вердикт

С тех пор как я часто начал использовать Bootstrap, мой стандартный размер базового шрифта стал в пикселях. Я использую проценты, чтобы выставить ширину и высоту для изображений, контейнеров и дивов, а em и rem для типографики и элементов относящихся к типографике, таким как margin и padding и т. п. Сейчас я играюсь с единицами viewport для адаптивной типографики и нахожу это очень крутым. Экспериментируйте с этими свойствами как можно больше и вы вскоре найдете стиль подогнанный именно для вас.

Разница между «px», «em» и «rem»

Пиксель задаёт точный размер элемента и размер шрифта.

Отображаемое количество пикселей на экране задаётся в настройках монитора. Т.е. если у монитора будет задан размер «1280×720», то элемент с шириной в «1280px» будет на всю ширину экрана.

Единица измерения «em» задаёт размер текста в зависимости от его текущего размера. Например, размер «2em» означает, что текущий текст надо сделать в два раза больше.

Код выше покажет следующий текст.

Обычный текст. Текст в em .

Размер зависит от текущего размера шрифта. Т.е. вложенная «2em» снова увеличит текст в два раза.

Обычный текст. Текст в em

Единица измерения «rem» изменяется в зависимости от размера текста, заданного в теге .

По коду выше, «1rem» будет равнятся «14px», а «2rem» будет равняться «28px».

В коде выше «2rem» будет равняться «28px». Вложенный элемент с «2rem» также будет равняться «28px», т.к. размер «rem» зависит не от текущего текста, а от размера, заданного в .

Должен ли я использовать единицы измерения px или rem в моем CSS?

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

Мой вопрос: следует ли использовать px или rem в моем CSS?

  • До сих пор я знаю, что использование px несовместимо с пользователями, которые корректируют свой размер базового шрифта в своем браузере.
  • Я проигнорировал em , потому что они более сложны для поддержания по сравнению с rem s, когда они каскадируются.
  • Некоторые говорят, что rem независимы от разрешения и поэтому более желательны. Но другие говорят, что большинство современных браузеров одинаково одинаково масштабируют все элементы, поэтому использование px не является проблемой.

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

TL; DR: используйте px .

Факты

Во-первых, крайне важно знать, что в соответствии со спецификацией модуль CSS px не равен одному физическому пикселю дисплея. Это всегда было правдой & ndash; даже в 1996 году спецификация CSS 1.

CSS определяет эталонный пиксель, который измеряет размер пикселя на дисплее с разрешением 96 точек на дюйм. На дисплее с dpi, существенно отличающимся от 96 dpi (как на дисплеях Retina), пользовательский агент изменяет размер модуля px , чтобы его размер соответствовал размеру эталонного пикселя. Другими словами, именно это изменение масштаба объясняет, почему 1 пиксель CSS равен 2 физическим пикселям дисплея Retina.

Тем не менее, до 2010 года (и несмотря на ситуацию с мобильным зумом) px почти всегда равнялся одному физическому пикселю, потому что все широко доступные дисплеи имели разрешение около 96 точек на дюйм.

Размеры, указанные в em , относятся к родительскому элементу. Это приводит к em «проблеме составления», когда вложенные элементы постепенно увеличиваются или уменьшаются. Например:

CSS3 rem , который всегда относится только к корневому элементу html , теперь поддерживается в 96% всех используемых браузеров.

Мнение

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

Вначале единственным способом предоставить пользователям способ масштабирования размера текста было использование относительных единиц размера (таких как em s). Это связано с тем, что в меню размера шрифта браузера просто изменился размер корневого шрифта. Таким образом, если вы указали размеры шрифта в px , они не будут масштабироваться при изменении параметра размера шрифта в браузере.

Современные браузеры (и даже не очень современный IE7) все изменили метод масштабирования по умолчанию, чтобы просто увеличивать все, включая изображения и размеры блоков. По сути, они делают опорный пиксель больше или меньше.

Да, кто-то еще может изменить свою таблицу стилей по умолчанию в браузере, чтобы настроить размер шрифта по умолчанию (эквивалент параметра размера шрифта старого стиля), но это очень эзотерический способ сделать это, и я бы поспорил, что никто не сделает этого 1 , (В Chrome он скрыт под расширенными настройками, веб-контентом, размерами шрифта. В IE9 он еще более скрыт. Вы должны нажать Alt и перейти к View, Text Size.) Гораздо проще выбрать опцию Zoom в главное меню браузера (или используйте Ctrl + + / — /колесико мыши).

1 — within statistical error, naturally

Если предположить, что большинство пользователей масштабируют страницы с помощью опции масштабирования, я нахожу относительные единицы большей частью неактуальными. Разработать вашу страницу намного проще, когда все указано в одном блоке (все изображения обрабатываются в пикселях), и вам не нужно беспокоиться о компоновке. («Мне сказали, что математики не будет» — там, где нужно вычислить, что 1.5em на самом деле работает.)

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

Поэтому мой ответ — использовать пиксельные единицы. Я использую px для всего. Конечно, ваша ситуация может отличаться, и если вы должны поддерживать IE6 (пусть боги RFC помилуют вас), вам все равно придется использовать em .

Топ-пост этого месяца:  Как войти в админку WordPress, а так же поменять логин и пароль администратора выданные вам при
Добавить комментарий