Rem em css: REM vs EM – Великий спор / Хабр

Leave a Comment / Css / By /

em и rem — всё, что нужно знать

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

  • Frontend
  • CSS

Источник: «rem vs em — Everything you need to know»

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

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

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

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

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

em и rem в CSS

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

Абсолютные единицы измерения: как следует из названия они являются абсолютными, фиксированными и ни на что не реагируют. Это означает, что бы не случилось — они будут одного размера. Абсолютные единицы измерения включают:

  • mm — миллиметры;
  • Q — четверть миллиметра 1 Q = ¼ mm
  • cm — сантиметры 1 cm = 10 mm;
  • in — дюймы;
  • px — пиксели, 1 px = 1/96 in;
  • pt — пункты, 1 pt = 1/72 in;
  • pc — пики, 1 pc = 12 pt.

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

  • % — размер в % относительно ширины родительского блока;
  • lh — высота строки элемента;
  • ch — ширина символа 0;
  • ex — x-высота шрифта, измеряется в высоте символа x в нижнем регистре,
  • vh — % высоты окна браузера;
  • vw — % ширины окна браузера;
  • vmax — большее значение высоты vh или ширины окна браузера vw;
  • vmin — меньшее значение высоты vh или ширины окна браузера vw.

И единицы измерения о которых мы будем говорить: em — размер шрифта относительно размера шрифта родительского элемента и rem — размер шрифта относительно размера шрифта корневого элемента.

Что такое

em

Как уже говорил выше, em в CSS — относительная единица измерения, используемая для определения размера элементов на веб-странице, в основном размера шрифта. Поскольку это относительная единица измерения — 1 em равен размеру шрифта установленном в родительском элементе. Это означает, что если вы установите размер шрифта в родительском <div> в 20px и установите размер шрифта дочернего <div> равный 2em, то размер шрифта в дочернем элементе будет равен 40px.

Давайте напишем HTML код:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
I'm parent div set to 20px
<div>
I'm the child div set to 2em, i.e 40px.
</div>
</div>
</body>
</html>

И CSS:

.parent{
font-size: 20px;
}
. child{
font-size: 2em;
}
p {
font-size: 1.5em;
}

Вот, что у нас получилось:

See the Pen

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

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

p {
font-size: 1.5em;
}

В этом примере для свойства font-size установлено значение 1.5em. Это означает, что размер текста в элементе параграф <p> будет в полтора раза больше размера шрифта браузера по умолчанию, если нет прямого родительского элемента.

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

Используя соответствующее CSS свойство, единицы измерения em можно использовать для установки размера других свойств элементов, таких как margin, padding и border.

Что такое

rem

Теперь, когда мы знаем что такое em, давайте рассмотрим rem. rem — ещё одна относительная единица измерения в CSS, которая расшифровывается как root em — корневой em. Поскольку мы знаем, что em равен размеру шрифта родительского элемента, мы можем сделать вывод, что корневой em относится к размеру шрифта корневого элемента, которым обычно является элемент <html>.

Не совсем понятно? Разберём ещё.

Как и em, rem наследует свой размер от родительского элемента, но родительский элемент на который смотрит rem, это не вышестоящий <div> или <section>, а самый первый элемент окружающий весь код, то есть элемент <html>. Давайте рассмотрим пример, используя предыдущий код. Тот же HTML код, только с дополнительным <div>.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
I'm parent div set to 20px
<div>
I'm the child div set to 2em, i.e 40px.
</div>
<div>
I'm the child div set to 2em, i.e 60px.
</div>
</div>
</body>
</html>

И добавим к предыдущему CSS коду следующий фрагмент:

html{
font-size: 30px;
}
.child-2{
font-size: 2rem;
}

Результат будет таким:

See the Pen

Как видите, несмотря на то, что элемент <div> находится внутри других <div> элементов, он полностью возвращается к элементу <html>, что бы взять его размер шрифта.

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

В чём разница между

em и rem

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

Когда использовать

em, а когда rem

rem рекомендуется использовать для глобальных значений, таких как font-size, margin и padding, особенно если вы хотите задать один font-size для всего документа и обеспечить его равномерное масштабирование, без влияния родительских элементов.

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

Возможные проблемы при использовании

em и rem

Не всё так идеально, как хотелось бы и вот несколько проблем с которыми вы можете столкнуться используя em и rem:

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

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

rem против em — все, что вам нужно знать

CSS является важной частью дизайна любого веб-сайта, но понимание нюансов его использования может быть сложным. Одна из самых важных вещей, которую нужно понять, — это разница между использованием rem и em в CSS и почему/когда вы должны использовать их.

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

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

Когда использовать единицы em

и rem в CSS

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

Eдиницы em и rem в CSS

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

Абсолютная длина: Абсолютные длины, как следует из названия, являются абсолютными; они зафиксированы и ни на что не реагируют. Это означает, что что бы ни случилось, они будут одного размера. Абсолютная длина включает cm, mm, in, px, pts, и pc.

Относительная длина: Относительная длина — это единицы, которые определяют длину относительно другой единицы, т. е. они реагируют на основе других указанных единиц или элементов. Они включают %, vmax, vmin, vh, vw, ch, ex и единицы, о которых мы будем говорить, em и rem.

Что такое em в CSS

Единицы em в CSS — это относительная единица измерения, используемая для определения размера элементов на веб-странице, в основном размера шрифта. Поскольку это относительно его родительского элемента, 1 em равен размеру шрифта, установленному в родительском элементе.

Это означает, что если вы установите размер шрифта в родительском div на 20px и установите размер шрифта дочернего div на 2em, размер шрифта в дочернем div будет равен 40px. Вот пример.

Сначала напишем HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.
  0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div>
    I'm parent div set to 20px
    <div>
        I'm the child div set to 2em, i.e 40px.
    </div>
   </div>
</body>
</html>
Next, the CSS.
.parent{
    font-size: 20px;
}
.child{
    font-size: 2em;
}
p {
    font-size: 1.5em;
 }

Это даст нам это.

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

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

p {
    font-size: 1.5em;
 }

В этом примере свойство font-size имеет значение 1,5em, что означает, что размер текста в элементе <p> будет в 1,5 раза больше размера шрифта браузера по умолчанию, если нет прямого родительского элемента.

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

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

Что такое rem в CSS

Теперь, когда мы знаем, что такое em, давайте посмотрим на rem. rem — это еще одна единица измерения длины в CSS, которая расшифровывается как «root em». Поскольку мы знаем, что em равен размеру пункта текущего шрифта, мы можем сделать вывод, что «root em» относится к размеру шрифта корневого элемента, которым обычно является элемент

<html>.

Как и em, rem наследует свой размер от родительского элемента, но родительский элемент, на который смотрит rem, — это не div или раздел над ним, а самый первый элемент, который его окружает, то есть элемент html. Давайте сделаем пример, используя предыдущий код. Тот же HTML-код, только с дополнительным div.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div>
    I'm parent div set to 20px
    <div>
        I'm the child div set to 2em, i.e 40px.
    </div>
    <div>
        I'm the child div set to 2em, i.e 60px.
    </div>
   </div>
</body>
</html>

Далее мы добавим следующий код CSS в ваш файл CSS.

html{
    font-size: 30px;
 }
 .child-2{
    font-size: 2rem;
 }

Результат будет таким.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-21-em-vs-rem/em-vs-rem-2.png" alt="em-vs-rem">

Как видите, несмотря на то, что элемент div child-2 находится внутри других элементов div, он полностью возвращается к элементу html, чтобы унаследовать его размер шрифта.

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

Различия между единицами em и rem

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

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

Когда использовать единицы em и rem в CSS

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

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

Возможные проблемы с использованием единиц em и rem в CSS

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

em и rem:

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

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

css — Путаница Rem/Em — Переполнение стека

О вашем сообщении можно многое сказать, и, вероятно, лучше всего начать с нескольких основ:

Зачем использовать единицы em или rem?

Единицы Em и Rem используются для определения относительного размера вещей.

Единицы em: Единица em в браузере изменяется относительно размера шрифта родителя, будь то элемент span, p, div, body или html. Таким образом, при использовании единиц em для размеров шрифта, ширины или высоты эти размеры будут зависеть от размера шрифта текущего родителя.

Единицы rem: Единица rem в браузере относится к базовому размеру шрифта документа. Если вы установите его на 16px, то 1rem будет 16px, 2rem — 32px и так далее. Это означает, что вы можете изменить масштаб всего документа в одной точке, и все, что использует это относительное измерение, будет соответственно увеличиваться/уменьшаться.

Точка: Эти измерения «относительны», поэтому ответ на вопрос «Зачем использовать единицы em или rem?» относится к единице em, просто используйте их, когда вы хотите измерить элемент на веб-странице. относительно его родителя и для rem, используйте их, когда вы хотите изменить размер элемента относительно документа.

Это простой подход, но он помещает веб-дизайн в правильный контекст для следующего вопроса…

Как следует использовать единицы em и rem в дизайне и верстке?

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

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

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

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

Подводя итог, вроде…

1) Если вам нужны статические размеры, просто используйте пиксели. Обычно нет никакой реальной пользы от использования относительных измерений, если вам нужны конкретные фиксированные размеры.

2) Em’s & rem’s являются одним из многих инструментов и служат своей цели так же, как другие инструменты (пиксели) служат своей. Это отличный инструмент, и его стоит освоить, поэтому используйте его, когда вам нужно, но только тогда, когда проблема требует относительного размера.

3) Вы можете разделить эти Compass Susy вопросы в более конкретный пост и привести пример, если вам нужна помощь с этим.

Я надеюсь, что это поможет, даже если это не отвечает на все ваши вопросы.

Cheers

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

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

tl;dr: use rem

Обзор единиц

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

rem представляют размер r oot em . это размер шрифта того, что соответствует :root . В случае HTML это элемент ; для SVG это элемент . Размер шрифта по умолчанию в каждом браузере * равен 16px .

При использовании

пикселей

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

Если вам нужна тонкая рамка, с px вы можете использовать 1px , с pt вам нужно будет использовать 0,75 pt для согласованных результатов, и это просто не очень удобно.

При использовании

rem

rem Значение по умолчанию 16px не является очень сильным аргументом в пользу его использования. Написание 0.0625rem хуже , чем запись 0.75pt , так зачем кому-то использовать rem ?

Есть две части rem Преимущество над другими юнитами.

  • Пользовательские предпочтения учитываются
  • Вы можете изменить видимое значение px rem на любое желаемое

Соблюдение пользовательских настроек

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

Уважение желаний пользователя не является чем-то из ряда вон выходящим. Тот факт, что браузер по умолчанию настроен на 16px , не означает, что любой пользователь не может изменить свои настройки на 24px или 32px , чтобы скорректировать плохое зрение или плохую видимость (например, блики на экране). Если вы основываете свои единицы на rem , любой пользователь с большим размером шрифта увидит сайт пропорционально большего размера. Границы будут больше, отступы будут больше, поля будут больше, все будет плавно масштабироваться.

Если вы основываете свои медиа-запросы на rem , вы также можете убедиться, что сайт, который видят ваши пользователи, соответствует их экрану. Пользователь с размером шрифта , установленным на 32px в широкоэкранном браузере 640px , фактически увидит ваш сайт так, как показано пользователю с размером 16px 9.0061 в широкоформатном браузере 320px . При использовании rem нет абсолютно никаких потерь для адаптивного веб-дизайна (RWD).

Изменение Apparent

px Value

Поскольку rem основан на размере шрифта

узла :root , если вы хотите изменить то, что представляет 1rem , все, что вам нужно сделать, это изменить размер шрифта :

: корень {
  размер шрифта: 100 пикселей;
}
тело {
  размер шрифта: 1rem;
} 
 
Никогда не делайте этого, пожалуйста

Что бы вы ни делали, не устанавливайте для элемента :root размер шрифта значение px .

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

Если вы хотите изменить кажущееся значение rem , используйте % единиц.

Математика для этого достаточно проста.

Видимый размер шрифта :root равен 16px , но допустим, мы хотим изменить его на

20px . Все, что нам нужно сделать, это умножить 16 на некоторое значение, чтобы получить 20 .

Составьте уравнение:

 16 * X = 20

И решить для X :

 X = 20 / 16
Х = 1,25
Х = 125%
 
: корень {
  размер шрифта: 125%;
} 
 
Если вы используете размер шрифта по умолчанию, у меня высота 20 пикселей.

Делать все, кратное 20 , не так уж и хорошо, но обычно рекомендуется сделать видимый размер rem равным 10px . Магическое число для этого 10/16 , что равно 0,625 или 62,5% .

: корень {
  размер шрифта: 62,5%;
} 
 
Если вы используете размер шрифта по умолчанию, у меня высота 10 пикселей.

Проблема в том, что ваш размер шрифта

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

 : root {
  размер шрифта: 62,5%;
}
тело {
  размер шрифта: 1.6rem;
} 
 
I'm font-size по умолчанию

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

 отступ: 20 пикселей;

превращается в

 padding: 2rem;

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

 :root {
  размер шрифта: 6,25%;
}
тело {
  размер шрифта: 16rem;
}

и 1rem равно 1px .

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

Подождите, так в чем подвох?

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

Медиа-запросы (используйте

em )

Одна из первых проблем, с которой вы столкнетесь с rem , связана с медиа-запросами. Рассмотрим следующий код:

 :root {
  размер шрифта: 1000 пикселей;
}
@media (минимальная ширина: 1rem) {
  :корень {
    размер шрифта: 1px;
  }
}

Здесь значение rem меняется в зависимости от того, применяется ли медиазапрос, а медиазапрос зависит от значения rem , так что же происходит?

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

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

 | пикс | бэр |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |

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

Safari

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

Переключение контекста

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

Моя единственная рекомендация здесь - придерживаться 62,5% для преобразования rem в видимый размер 10px , потому что это было более распространенным в моем опыте.

Общие библиотеки CSS

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *