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

У меня есть следующий скрипт, который преобразует px в em: perl -p -i -e ‘s/(\d+)px/($1\/16).em/ge’ stylesheet.css Однако, когда я настраиваю его, чтобы преобразовать em в px, он не работает хорошо:…

У меня есть проект, где IE9 -это браузер с минимальной совместимостью. Это означает, что я могу использовать rem -блок. По моему опыту работы с большими проектами, в которых участвует много…

Сегодня я поиграл с использованием em’s/rem’s на новом сайте, и у меня есть несколько вещей, которые я хотел бы обсудить/спросить Здесь. В течение многих лет я был полностью пиксельным человеком с…

Я хотел бы знать, почему Boostrap выбирает rem и em вместо px для новой версии Boostrap 4 . Мы можем посмотреть здесь Некоторые примеры переменных: $font-size-h2: 2.5rem !default; $font-size-h3:…

Хорошо, во-первых, да, я прочитал много-много статей ( Должен ли я использовать единицы измерения px или rem в моем CSS? ) и форумов об этом. Я знаю, что 1px — это не физический пиксель , а скорее…

Я создаю новое веб-приложение с foundation 5.x и заметил, что все, похоже, основано на rem. Раньше я изменял отступы/поля с помощью px,но мне кажется, что создание темы с фундаментом может быть…

Есть ли какие-либо доказательства того, что конкретная единица калибровки занимает больше времени для обработки? Например, если бы вы использовали rem для определения размера всего вашего сайта,…

Когда мы используем em/rem, разве мы не даем браузеру дополнительную работу с точки зрения изменения значений em/rem на px во время рендеринга, что может быть не очень хорошей практикой, поскольку…

Когда я должен использовать rem поверх px? Я вижу много статей, в которых говорится, что я должен использовать REM, чтобы уважать предпочтения пользователя, но примеры всегда говорят о размере…

Адаптивные размеры шрифтов при помощи rem

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

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

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

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

* в параметре модели блока margin-bottom em относится к размеру шрифта самого элемента. Изменения в размере шрифта вели к изменениям в поле (margin), что могло привести к абсолютно нежелательному эффекту.

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

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

В феврале 2009 года немецкий разработчик Jens Grochtdreis опубликовал статью под названием «Die leidige Sache mit der Schriftskalierung», которую можно было назвать «Раздражающие факты о масштабировании шрифтов», если бы ее публиковали на русском языке. Grochtdreis рекомендовал читателям использовать Px. На тот момент современные браузеры уже умели масштабировать страницы, а необходимости брать в учет IE6 уже не было.

Годом позже, немецкий разработчик Gerrit van Aaken поддержал Grochtdreis в своей статье «Warum ich Pixel fur CSS-Schriftgrade verwende» или «Почему мы используем PX для указания размеров шрифта в CSS». Не менее интересным, чем сама статья, было начавшееся обсуждение в комментариях. И в этом обсуждении, в комментарии под номером 22, человек упомянул о единице изменения REM, о которой тогда практически никто не знал.

Спустя некоторое время, в 2011 году термин rem начал набирать обороты, медленно, но уверенно. И это не удивительно, так как rem совмещает в себе плюс и px и em. Он не менее гибок, чем его предшественники, но имеет и исправления недостатков с точки зрения наследования, так как rem всегда относится к корневому элементу – к ‘html’, а не к ‘body’.

Чтобы получить значение rem, мы делим предпочитаемый размер в пикселях на базовое значение равное 16. Вот так будет выглядеть корректное указание размера шрифта в CSS:

html { font-size: 100%; } /* Браузерное умолчание, т.е. 16px  */   
h2 { font-size: 1.75rem; } /* 28/16 = 1.75 */  
h3 { font-size: 1.375rem; } /* 22/16 = 1.375 */   
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

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

Если вам кажется, что все звучит слишком хорошо чтобы быть правдой, то вы правы. Всегда есть какие-то минусы, и в данном случае это старые браузеры. Сервис http://caniuse.com/rem покажет вам, чего следует ожидать. И если честно, можно ожидать довольно многого:

Недостатки данного метода связаны, как обычно, с названиями браузеров, и на этот раз дело касается IE версиями моложе 9, а также Opera Mini. Именно эти друзья делают необходимым реализовать запасной вариант в PX. Учитывая вышеприведенный пример, все должно выглядеть следующим образом:

html { font-size: 100%; }   
h2 { 
font-size: 28px; 
font-size: 1.75rem; 
}   
h3 { 
font-size: 22px; 
font-size: 1.375rem; 
}    
p { 
font-size: 14px; 
font-size: 0.875rem; 
}

Современные браузеры будут считывать и переписывать px-значение теми, что указаны в rem, а старые браузеры будут придерживаться инструкции в px, и игнорировать вторую строку. Примерно таким мы и видели этот процесс…

px, em или rem? — WebBeaver.ru

Когда я создавал библиотеку mappy-breakpoints, чуть больше года назад, я использовал rem-ы. Затем, после разговора с Sam Richard, я переключился на em, потому что узнал, что особой разницы между ними нет. Нахрена переключился тогда?

Кроме em и rem, популярным методом является указание медиа-запросов в старых добрых пикселях. Я задался вопросом, можно ли использовать пиксели в медиа-запросах пока разработчики браузеров не решили проблему с масштабированием.

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

Чтение этой статьи подразумевает то, что вы знакомы с em и rem. Если нет — валите на хрен вам сначала сюда.

Основной эксперимент

Я создал три div-а, один для пикселей, один для em-ов и один для rem-ов и окрасил их в разные цвета, чтобы легко различать их.

.pixel { background: red; }
.em { background: green; }
.rem { background: blue; }

Затем создал медиа-запрос с min-width для всех трёх блоков, использовав соответствующие единицы. И, чтобы сразу увидеть разницу, сделал их полупрозрачными. Вот как выглядит код для пикселей:

.pixel {
  background: red;  
  @media (min-width: 400px) {
    opacity: 0.5
  }
}

Следующий шаг — выяснить, как это сделать для em и rem.

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

• Font-size для html изменён.
• Пользователь масштабировал страницу/
• Пользователь изменил размер шрифта браузера.

Так как условия идеальны, я смело могу заявить, что 16px == 1em == 1rem. Значит 400px == 25em == 25rem.

.pixel {
  background: red;  
  @media (min-width: 400px) {
    opacity: 0.5
  }
}

.em {
  background: green;  
  // 400 ÷ 16 = 25
  @media (min-width: 25em) {
    opacity: 0.5
  }
}

.rem {
  background: blue;  
  // 400 ÷ 16 = 25
  @media (min-width: 25rem) {
    opacity: 0.5
  }
}

Если все медиа-запросы верны, мы должны увидеть, как они подействуют на 400px.

Так оно и есть (проверял на всех браузерах).

Так как всё работает правильно, то мы можем быть уверены, что на данном этапе нет разницы между пикселями, em и rem.

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

• Font-size для html изменён.
• Пользователь масштабировал страницу/
• Пользователь изменил размер шрифта браузера.

Давайте рассмотрим их по-одному.

1. Размер шрифта html изменён

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

html { 
  // изменение размера шрифта по-умолчанию 
  font-size: 200% 
}

Итак, я изменил размер шрифта на 200%, а это значит, что 1em и 1rem теперь равен 32px. А если это изменение влияет на em и rem, значит медиа-запросы должны срабатывать на 800px.

Это правильное поведение. Em и rem не должны зависеть от изменений размера шрифта html, потому что они основаны на внутреннем размере шрифта браузера.

К сожалению, в Safari что-то пошло не так. Rem-запрос включается только на 800px.

Так как это происходило только в Safari, мне стало интересно: происходит ли тоже самое на мобильной версии браузера. Оказывается, да.

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

2. Пользователь масштабировал страницу

Следующий сценарий тоже довольно распространён. Если текст на сайте маленький, пользователь может увеличить его, используя zoom браузера.

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

Результаты экспериментов в Chrome, Firefox и IE показал такие же результаты. Медиа-запросы в пикселях срабатывают в то же время, что и запросы в em и rem.

И, как вы уже догадались, Safari не может в zoom.

К сожалению, это значит, что мы не можем использовать пиксели в медиа-запросах. Safari не поддерживает их должным образом (или вы решили забить на Safari?).

Переходим к последнему эксперименту, может там что-то интересное произойдёт?

3. Пользователь изменил размер шрифта браузера по-умолчанию

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

Это было бы круто, ведь нам не нужно было бы проделывать третий эксперимент!

К сожалению, мы не можем гарантировать этого и наш долг, как разработчиков, сделать, чтобы всё было нормально.

В этом эксперименте я увеличил размер шрифта браузера по-умолчанию. Если хотите сделать тоже самое — вот путь настроек:

• Chrome: настройки > показать дополнительные настройки > вид страницы.
• Firefox: настройки > содержимое > шрифты и цвета.
• IE: страница > размер шрифта. В IE11 что-то не нашёл такого.

Единственный браузер, в котором я не нашёл данную функцию, оказался ВНЕЗАПНО Safari. Я только сделал, чтобы наименьший размер шрифта был больше 16px (настройки > дополнительные настройки > доступность (?)).

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

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

Это не баг. Всё правильно, ведь пиксели — абсолютные единицы. Медиа-запрос срабатывает на 400px и не важно, что пользователь изменил размер шрифта по-умолчанию.

А вот em и rem основаны на размере шрифта браузера. Следовательно, они меняются, когда пользователь меняет размер шрифта браузера.

Что ж… Жаль, что приходится вас расстраивать, любители пикселей, но пиксель не подходит для задания медиа-запросов.

Завершающий эксперимент

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

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

Таким образом, мой совет — используйте em-ы в медиазапросах.

Если вы используете какую-либо библиотеку, медиа-запросы которой основаны не на em-ах — скиньте разработчику ссылку на эту статью, чтобы он знал о последствиях. Или не стесняйтесь и переходите на em-основанные библиотеки вроде Mappy-breakpoints, Breakpoint-sass или sass-mq.

Почему не стоит использовать только px в css

Дебатов было много, так какие единицы измерения нужно использовать в CSS?

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

• Пиксели игнорируем и не используем.
• Используйте REM для размеров и расстояния.
• Используйте EM для медиа запросов.

Пиксели

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

Так что с пикселями?

Доступность

Я большой сторонник доступности в вебе. Я бы взял доступность над «довольно» в любой день.

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

В большинстве браузеров, пользователь может установить по умолчанию свой размер шрифта, чтобы быть разного размера по умолчанию (обычно 16px). Если пользователь устанавливает их по умолчанию в 20px, все размеры шрифта должны масштабировать соответственно.

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

К счастью, установка размера шрифта в пикселях полностью не разрушит доступности. Пользователь может увеличивать и уменьшать масштаб с помощью Ctrl и +/- . Однако, мы можем сделать лучше.

REM

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

REM показывает размер шрифта корневого элемента (например, размер шрифта для элементов тега <html>). При использовании на размер шрифта на этой корневой элемент, он представляет свое первоначальное значение.

Как рассчитать PX от REM

Основной и наиболее распространенный пример: HTML размер шрифта установлен в 10px, параграф установлен в 1.6rem — 1.6rem * 10px = 16px.

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

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

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

Так как же мы можем не ломать наши доступности?

Установите корневой HTML размер шрифта в процентах. Это процент браузера по умолчанию размера шрифта пользователя. Типичный способ установить HTML размер шрифта до 62,5%. Это потому, что 62,5% 16px (по умолчанию размер шрифта) является 10px. Что бы еще сделать 1.6rem = 16px. Это теперь означает, что если размер шрифта в браузере пользователя по умолчанию меняется на, например, 20 пикселей, 1.6rem будет теперь равна 20px. Так что если пользователь хочет больше шрифтов, пусть. Счастливый дизайнер. Счастливый Разработчик. Все цифры по-прежнему легко работают.

Идеальный сценарий должен был бы оставить HTML размер шрифта как 100%, но это делает математику немного сложнее. Например, 16px теперь 1rem, 20px является 1.25rem, 24px является 1.5rem и т.д.

Спасение с помощью Sass/SCSS

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

Что насчет EM?

EM первоначально выполняется аналогичным образом как REM, пока он не доходит к вложенности. Например, возьмите DIV с размером шрифта 2em, а затем добавить параграф с размером шрифта 2em. Размер шрифта этого параграфа теперь 2em относительно DIV. Можно быстро потерять след математических расчетов и какой размер есть что, и он быстро становится неуправляемым. Это то, что REM решает — размер всегда относится к корню.

Что насчет медиа-запросы?

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

В этом блоге освещаются некоторые из ключевых различий между использованием пикселей, EM и REM в медиа-запросах https://zellwk.com/blog/media-query-units/.

Таким образом, px и rem для медиа запросов терпят неудачу в различных браузерах при использовании масштабирования браузера и EM являются лучшим вариантом который мы имеем. REM не намного больше, чем пикселей на данный момент, так что мы будем их полностью сбрасывать со счетов.

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

Вот некоторые примеры:

Мы используем 6 знаков после запятой, поскольку некоторые браузеры не показывают никакой разницы между 2-5.d.p.

Пример 1: в браузере установлен режим масштабирования 100%, ширина браузера устанавливается на 640pх

min-width: 64em = Hit
max-width: 63.99em = Miss
max-width: 63.999999em = Hit
min-width: 640px = Hit
max-width: 639px = Miss
max-width: 639.999999px = Miss

Пример 1б: в браузере установлен режим масштабирования 100%, ширина браузера устанавливается на 639pх

min-width: 64em = Miss
max-width: 63.99em = Hit
max-width: 63.999999em = Hit
min-width: 640px = Miss
max-width: 639px = Hit
max-width: 639.999999px = Hit

Поэтому мы не можем использовать 6dp для EM, так как она попадает как медиа-запросы.

Пример 2: в браузере установлен режим масштабирования 110%, ширина браузера устанавливается на 704pх (потому что 640px * 110% = 704px)

min-width: 64em = Miss
max-width: 63.99em = Miss
max-width: 63.999999em = Hit
min-width: 640px = Miss
max-width: 639px = Miss
max-width: 639.999999px = Hit

Пример 2б: в браузере установлен режим масштабирования 110%, ширина браузера устанавливается на 705pх

min-width: 64em = Hit
max-width: 63.99em = Miss
max-width: 63.999999em = Miss
min-width: 640px = Hit
max-width: 639px = Miss
max-width: 639.999999px = Miss

Таким образом, мы не можем использовать 2dp для EM. Так что все мы остались на этом этапе является 6dp пикселей. Это работает с зумом браузера. Однако…

Пример 3: в браузере установлен режим масштабирования 100%, размер шрифта браузера 20px, ширина браузера устанавливается на 800pх (потому что 640 * 125% = 800)

min-width: 64em = Hit
max-width: 63.99em = Miss
max-width: 63.999999em = Hit

Так опять же, 6dp EM все еще вне. И мы не можем использовать пиксели длямедиа запросов, потому что они по-прежнему попадают в 640px/639px, потому что они игнорируют EM/REM.

Каково же решение?

К сожалению, нет ответа. Пока браузеры не разберутся с вопросами округления, мы немного застряли.

Самый простой приемлемый вариант, это то, что бы мы никогда не создадим min-width и max-width перекрытия в одном блоке. Пример:

body {
    @media screen and (max-width: 63.99em) {
        background: blue;
    }

    @media screen and (min-width: 64em) {
        background: blue;
    }
}

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

body {
    background: blue;

    @media screen and (min-width: 64em) {
        background: blue;
    }
}

Почему нет реального решения? Я не верю, мало кого волнует. Любая статистика говорит, что люди не меняют в своем браузере по умолчанию размер шрифта, безусловно, перекос. Опции в Chrome, чтобы изменить размер шрифта по умолчанию теперь очень хорошо спрятана в дополнительных опциях браузера.

Подводные камни

Есть некоторые подводные камни этого подхода:

• Если вы привыкли писать как min-width и max-width медиа запросов в том же блоке кода, это займет больше времени.
• Увеличивается сложность, как вам придется переопределить CSS одну или другую сторону, а не сообщая браузеру использовать опцию A или B.
• Увеличивается размер файла из-за этих переопределений. Не намного, но это стоит рассматривать.

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

Помните, для кого вы создаете веб-сайты.

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

В этой статье вы узнаете про выставление размера шрифта в пикселях, em, rem, процентах и viewport единицах.

Эта статья перевод — CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units

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

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

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

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

@media (max-width: 400px) {
 html, body { font-size: 15px; }
}

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

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

Для примера, <div> с размером шрифта в 16px содержит <p> размером шрифта в 2em, что пересчитывается как 32px для <p>. Теперь добавьте <div> в <p> с размером шрифта в 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 в REM (мгновенный и двунаправленный)

Таблицы преобразования PX ↔︎ REM

Преобразовать пиксели в REM

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

С помощью модуля CSS rem вы можете определить размер относительно font-size корневого тега HTML.

Преобразование, конечно, работает в обоих направлениях, просто измените противоположное значение.

Пример

Итак, если мы возьмем размер по умолчанию в качестве примера, то 1px представляет 0.0625rem и, в другом направлении, 1rem представляет 16px .

EM против REM: различия

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

REM — это более новый модуль, старые браузеры его не поддерживают.

пикселей в rem, если размер шрифта root равен 16px — Standardista

Если у вас

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

вы можете использовать следующую таблицу для преобразования из ПИКСЕЛЕЙ в REMS

Опубликовано

Эстель Вейл

Меня зовут Эстель Вейл. Я открытый веб-евангелист и инженер сообщества.Я веб-разработчик-консультант, пишу технические книги с О’Рейли, провожу семинары по веб-интерфейсу и рассказываю о веб-разработке, производительности и других забавных вещах по всему миру. Если у вас есть какие-либо рекомендации по темам, которые я хотел бы затронуть, дайте мне знать через @estellevw. Просмотреть все сообщения Эстель Вейл

REM в PX

Конвертер REM в PX — это бесплатный онлайн-инструмент, который вы можете использовать для простого преобразования rem (root em) в px (пиксель).Имейте в виду, что 1rem равен корневому размеру шрифта , другими словами, размеру шрифта в элементе.

Как использовать конвертер REM в PX

• Шаг 1: Введите ваш основной ( корень ) размер шрифта.
• Шаг 2: Введите значение rem ( root em ), которое вы хотите преобразовать в пиксели ( пикселей, ).
• Шаг 3: Нажмите клавишу ввода или нажмите кнопку преобразования, чтобы получить эквивалент пикселей .

Видеоурок: преобразование rem в px

  {размер шрифта: 16 пикселей; размер шрифта: 1 бэр; }

Размер установлен таким образом, что 1 rem = 16 пикселей.

Следовательно, $ rembase составляет 16

html {
размер шрифта: 100%; / * Браузер по умолчанию 16 пикселей * /
}  

  html {font-size: 62,5%; / * 10px браузер по умолчанию * /
}  

  / * Twenty Twelve Theme Rem Values
-------------------------------------------------- ------------
В этой таблице стилей используются значения rem с резервным пикселем.Рем
значения (и высоты строк) рассчитываются с использованием двух переменных:

$ rembase: 14;
$ line-height: 24;

---------- Примеры

* Используйте значение пикселя с запасным вариантом rem для font-size, padding, margins и т. Д.
отступ: 5px 0;
заполнение: 0.357142857rem 0; (5 / $ перекомпоновка)

* Установите размер шрифта, а затем установите высоту строки в зависимости от размера шрифта
размер шрифта: 16 пикселей
размер шрифта: 1.142857143rem; (16 / $ перекомпоновка)
высота строки: 1,5; ($ линия-высота / 16)

---------- Вертикальный интервал

Вертикальный интервал между большинством элементов должен составлять 24 или 48 пикселей.
для поддержания вертикального ритма:

.my-new-div {
маржа: 24px 0;
маржа: 1.714285714rem 0; (24 / $ перебазировка)
}  

  1рем = 16 пикселей  

  html {
размер шрифта: 16 пикселей; / * это означает, что 16 пикселей равно 1 бэр * /
}  

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

п{
размер шрифта: 1 бэр;
}  

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

п{
размер шрифта: 1 бэр;
}  

  22px / 16px = 1.375rem / * т.е. равно 22px. * /  

  html {
размер шрифта: 16 пикселей;
@media only screen и (max-width: 991px) {
размер шрифта: 14 пикселей;
}
}  

  











 
 Это заголовок h2 
 
 Это абзац 


 
  

  html {
размер шрифта: 16 пикселей; / * т.е. 1 бэр * /
}

.test-col h2 {
размер шрифта: 2rem; / * т.е. 32 пикселя * /
}

.test-col p {
размер шрифта: 1 бэр; / * т.е. 16 пикселей * /
}  

  @media only screen and (min-width: 768px) and (max-width: 991px)
{
  html {
    размер шрифта: 14 пикселей; / * i.е. 1 бэр для экрана планшета * /
  }
}

теперь размер шрифта  
 & 
 
 работает так же на планшете
.test-col h2 {
  размер шрифта: 2rem; / * т.е. 28 пикселей * /
}

.test-col p {
  размер шрифта: 1 бэр; / * т.е. 14 пикселей * /
}  

  @media only screen and (max-width: 767px) {
html {
размер шрифта: 13 пикселей; / * т.е. 1 бэр для экрана мобильного * /
}
}

теперь размер шрифта  
 & 
 
 работает так же на мобильных устройствах

.test-col h2 {
размер шрифта: 2rem; / * т.е. 26 пикселей * /
}

.test-col p {
размер шрифта: 1 бэр; / * i.е. 13 пикселей * /
}  

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

  html, body {font-size: 16px; }
div {размер шрифта: 18 пикселей; }
p {font-size: 1rem; }
  

  $ screen-sm: 768px;
$ screen-md: 1024px;
$ screen-lg: 1200 пикселей;
$ screen-xl: 1600 пикселей;
  

  кузов {
    семейство шрифтов: «Open Sans», без засечек;
    размер шрифта: 15 пикселей;
    высота строки: 1,6;

    @media screen и (min-width: $ screen-sm) {
        размер шрифта: 16 пикселей;
    }

    @media screen и (min-width: $ screen-lg) {
        размер шрифта: 18 пикселей;
    }

    @media screen и (min-width: $ screen-xl) {
        размер шрифта: 20 пикселей;
    }
}
  

  h2 {font-size: 3rem;}
h3 {размер шрифта: 2,5 бэр; }
h4 {размер шрифта: 2rem; }
h5 {размер шрифта: 1,5 бэр; }
h5 {размер шрифта: 1 rem; }
  

 
h2 {размер шрифта: 2.4rem;}
h3 {размер шрифта: 2rem; }
h4 {font-size: 1.6rem; }
h5 {размер шрифта: 1,2 бэр; }
h5 {размер шрифта: 1 rem; }

@media screen и (min-width: $ screen-sm) {
  h2 {размер шрифта: 3rem;}
  h3 {размер шрифта: 2,5 бэр; }
  h4 {размер шрифта: 2rem; }
  h5 {размер шрифта: 1,5 бэр; }
  h5 {размер шрифта: 1 rem; }
}