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 могут быть полезны в определенных ситуациях, важно тщательно рассмотреть их потенциальные недостатки и определить, являются ли они лучшим выбором для вашего проекта.

Оператор REM — Visual Basic

Twitter LinkedIn Facebook Адрес электронной почты

  • Статья
  • Чтение занимает 2 мин

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

Синтаксис

REM comment  
' comment

Компоненты

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

Оператор можно поместить REM отдельно в строку или на строку после другого оператора. Оператор REM должен быть последним оператором в строке . Если он следует за другим оператором REM , объект должен быть отделен от этого оператора пробелом.

Вместо можно использовать одну кавычку REM('). Это верно, если ваш комментарий следует за другим заявлением на той же строке или находится в одиночку на строке.

Примечание

Невозможно продолжить инструкцию REM с помощью последовательности продолжения строки (_). После начала комментария компилятор не проверяет символы на наличие особого значения. Для примечания из нескольких строк используйте другой REM оператор или символ комментария (') в каждой строке.

Пример

В следующем примере показана REM инструкция , которая используется для включения пояснительных примечаний в программу. Здесь также показана альтернатива использования одного символа в кавычках REM(') вместо .

Dim demoStr1, demoStr2 As String
demoStr1 = "Hello" REM Comment after a statement using REM.
demoStr2 = "Goodbye" ' Comment after a statement using the ' character.
REM This entire line is a comment.
' This entire line is also a comment.

См. также раздел

  • Комментарии в коде
  • Практическое руководство. Разбиение и объединение инструкций в коде

Р.Э.М. – It’s End Of The World As We Know It (And I Feel Fine) (1992, винил)

Другие изображения 4:07 B Это конец света, как мы его знаем (и я чувствую себя хорошо) 4:07

  • Рекордная компания — Hispavox, S. A.A.
    • 3030303
  • Фонографические авторские права ℗ – International Record Syndicate, Inc.
  • Фонографические авторские права ℗ – I.R.S. Записи
  • Фонографические авторские права ℗-Hispavox, S.A.
  • , изготовленные-Tecnifón, S.A.
  • , напечатанный-Dirograf, S.A.
  • Распространен-Hispavox, S.A.
  • . Berry*, Stipe*, Mills*, Buck*

Первый каталожный номер на рукаве, второй на этикетке.
Одностороннее промо.

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

  • Matrix / Runout (Both sides): 006-4024097 A+B+
  • Depósito Legal: M. 4.726-1992
  • Rights Society (Boxed): SGAE

New Submission

 Its The Конец света, как мы его знаем (и я чувствую себя хорошо) (7 «, 45 об / мин, сингл) I.R.S. Records IRS-53220 US 1987

Недавно отредактировано

 Конец света, каким мы его знаем (и я чувствую себя прекрасно) (кассета, сингл) I. R.S. Записи IRSC-53220 US 1987

Недавно отредактировано

 его конец мира, как мы его знаем (и я чувствую себя хорошо) (12 «, 33 ⅓ RPM) I.R.S. Records L33-17430 US 1987

Недавно отредактировано

. Серебряная этикетка для инъекций) I.R.S. Записи IRM 145 UK 1987

Недавно отредактировано

 Это конец света, как мы его знаем (и я чувствую себя хорошо) (12 «, 45 об / мин, сингл). I.R. Записи IRMT 145 Великобритания 1987

  • Crush с подводной для глаз

    R.E.M.

  • Shiny Happy People

    R.E.M.

  • 9

  • .

    Странные валюты

    Р.Э.М.

  • Язык

    Р.Э.М.

  • Венделл Джи

    Р. Э.М.

  • Электронно-синий

    Р.Э.М.

  • Bang And Blame

    Р.Э.М.

  • Покидая Нью-Йорк

    R.E.M.

  • Ночное плавание

    R.E.M.

  • Academy Fight Song / Watching Bluegrass Burn

    REM* / The Coal Porters* с участием Сида Гриффина

Edit Release
All Versions of этот выпуск
Последние изменения

Купить винилПродать винил

  • Есть:102
  • Хочу:83
  • Средняя оценка:4,83 / 5
  • Рейтинги: 6
  • восьмидесятые годы1, Stathisan, FL17

    Сообщить о подозрительной деятельности

    R.E.M. это конец света, каким мы его знаем, и

    Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.

    Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.

    • Нажмите, чтобы увеличить

    Цена: 590,40 турецких лир+

    Изначальная цена: 787,27 турецких лир+ (скидка 25%)

    Загрузка

    Включены местные налоги (где применимо)

    Звездный продавец

    Star Sellers имеют выдающийся послужной список в обеспечении отличного обслуживания клиентов — они постоянно получали 5-звездочные отзывы, вовремя отправляли заказы и быстро отвечали на любые полученные сообщения.

    | 15 669 продаж |

    5 из 5 звезд

    Высота

    Выберите вариант 11 дюймов (590,40 турецких лир) 17 дюймов (738,05 TL) 24 дюйма (1328,65 турецких лир) 36 дюймов (2214,54 турецких лир)

    Выберите опцию

    Продавец звезд. Этот продавец неизменно получал 5-звездочные отзывы, вовремя отправлял товары и быстро отвечал на все полученные сообщения.

    Внесен в список 21 февраля 2023 г.

    344 избранных

    Сообщить об этом элементе в Etsy

    Выберите причину… С моим заказом возникла проблемаОн использует мою интеллектуальную собственность без разрешенияЯ не думаю, что это соответствует политике EtsyВыберите причину…

    Первое, что вы должны сделать, это связаться с продавцом напрямую.

    Если вы уже это сделали, ваш товар не прибыл или не соответствует описанию, вы можете сообщить об этом Etsy, открыв кейс.

    Сообщить о проблеме с заказом

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

    No related posts.