Rem в px: x❺❺❺ Как перевести PX в REM Калькулятор

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

Вопрос задан 8 лет 4 месяца назад

Изменён 8 лет 4 месяца назад

Просмотрен 4k раз

Доброго времени суток. Я несколько дней пытаюсь найти ответ на свой вопрос. Решила обратиться к вам. Хотелось бы начать пользоваться при верстке такими единицами, как rem, но нигде нет информации, как и где их применять. В основном информация одна и та же. Я знаю, что не только Rem, но и px. Как их правильно использовать вместе? Может, вы знаете какую-то статью или сами верстаете. Подскажите, пожалуйста. Заранее благодарю.

• css3
• вёрстка
• css

0

Вот, например, эта статья: Адаптивные размеры шрифтов при помощи REM

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

5

@kamila, не совсем понятен Ваш вопрос: «Как их правильно правильно использовать вместе?»

Для себя, я это понимаю так: «rem unit» — это практически то же, что и «em unit«, с той лишь разницей, что «em» масштабирует шрифт относительно font-свойств его ближайшего или прямого родительского элемента, а «rem» — всегда относительно корневого элемента. А вот «px unit«, в отличие от них, не масштабируется.

7

Крайне рекомендую ознакомиться со следующей статьей:

Font Size Idea: px at the Root, rem for Components, em for Text Elements

В ней есть очень наглядный пример использования этих значений.

Еще полезно будет почитать вот эту подборку:

Why Ems?
px – em – % – pt – keyword
Relative is the new absolute: the rem unit
Should I use px or rem in my css?

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Доводы в пользу применения rem в CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Secrets to using rem in CSS: CSS Tips».

Photo by cottonbro from Pexels

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

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

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

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

rem или em?

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

Пример:

 /*Базовый fontsize - 16px*/
1rem = 16px
2rem = 32px
1em = 16px
2em = 32px

Разница между единицами в том, что единицы rem в качестве базы всегда используют значение корневого элемента (html), а em — значение своего контейнера (родительского элемента).

Пример:

/*Базовый fontsize - 16px*/
/*fontsize родительского элемента - 20px*/
1rem = 16px
2rem = 32px
1em = 20px
2em = 40px

Что такое значение корневого элемента?

Базовый размер шрифта по умолчанию устанавливается браузером. При этом в большинстве браузеров 1 rem = 16 px. Это означает, что вы даже можете использовать стандартизированную 8-пиксельную сетку, поскольку 0,5 rem = 8 пикселей.

Если изменить font-size элемента html, можно установить базовое значение по своему усмотрению. Но весь смысл в том, что по умолчанию значение задает браузер. Это отдает контроль в руки пользователя, который может менять настройки в браузере.

Fluid-элементы

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

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

Пример:

h2 {
   font-size: 2rem; 
 }
p {
   font-size: 1rem;
}

Заголовок всегда будет крупнее, чем текст абзаца, независимо от его базового размера. Они масштабируются вместе. То же самое и с кнопками, font-size, border-radius и padding — все масштабируется вместе с базовым размером.

А как насчет пикселей?

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

Конвертер

PX в REM

REM, сокращение от root em , является одной из единиц измерения относительно шрифта, обычно используемых в css. Этот конвертер px в rem представляет собой бесплатный онлайн-инструмент, который вы можете использовать для преобразования значения px в его эквивалент rem.

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

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

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

Таблица преобразования

PX в REM

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

ПХ	РЭМ
4 пикселя	0,25 бэр
8 пикселей	0,5 бэр
12 пикселей	0,75 бэр
16 пикселей	1рем
20 пикселей	1,25рем
24px	1,5рем
32px	2рем
40px	2,5рем
48px	3рем
64px	4рем
96px	6рем
128px	8рем
160px	10рем
176px	11рем
192px	12рем
208px	13рем
224px	14рем
256px	16рем
320px	20рем
480px	30рем
576px	36рем
768px	48рем
800px	50рем
960px	60рем
992px	62рем
1024px	64рем
1120px	70рем
1200px	75рем
1280px	80рем
1440px	90рем
1600px	100рем

Как преобразовать PX в REM

Ключом к преобразованию значения px в rem является размер шрифта, который вы объявляете в элементе.

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

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

EM в PX Формула:

rem = px/базовый шрифт

Чтобы узнать разницу между px (пиксель) и rem (корень ems), вам нужно сначала понять, что они из себя представляют, как себя ведут.

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

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

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

   
    <стиль>
      HTML {
        размер шрифта: 16px;
      }
    
   
 

Итак, если вы назначили базовый шрифт, когда вы устанавливаете размеры для своих

,

,