
Содержание статьи
от ZAYDEK
tl;dr не используйте *просто* px
«Две единицы входят! Одна единица идет…” – ThunderDOM
Прежде чем перейти к статье, я просто хочу поделиться, что я создаю продукт, и я хотел бы собрать некоторые данные о том, как лучше обслуживать веб-разработчиков. Я создал краткую анкету, чтобы проверить ее до или после прочтения этой статьи. Пожалуйста, посмотрите это – спасибо! А теперь вернемся к нашему обычному запланированному программированию.
Я собираю некоторые данные о том, что вам нужно веб-разработчиков с веб-образовательных инструментов, и я хотел бы получить ваши ответы. В описании каждого вопроса я включил свои ответы, чтобы вы также могли познакомиться со мной лучше! Есть 15 вопросов? https://t.co/qvGU3dF0DB.
— имя пользователя[ZAYDEK] (@username_ZAYDEK) 8 марта 2019 года
Кто бы победил в Бойце?
— имя пользователя[ZAYDEK] (@username_ZAYDEK) 13 апреля 2018 года
Привет! ? Я Зайдек, и я здесь, чтобы приложить руку к изучению HTML и CSS. В этой статье мы исследуем разницу между единицами em и rem и получим понимание из первых принципов.
Когда я впервые изучил HTML и CSS, это был мир боли, потому что я неправильно понял основания. Узнав об Интернете, я хотел бы поделиться некоторыми мыслями и ободрением, потому что это может быть проще, чем вы себе представляете.

Я также преподавал бесплатный курс HTML/CSS на Scrimba, где учу, как создать хороший блог с нуля. Нажмите здесь, чтобы зарегистрироваться! ?
Scrimba.com – это интерактивная интерактивная платформа, где веб-сайты записываются как события, а не видео, и их можно редактировать! ?
Единица em
У него есть интересная этимология. em
ничего не подозревая означает «М».

Это кажется рекурсивным, не правда ли? Как можно em быть самоссылкой? Это так хитро… так тонко. Ну, em – как мы знаем это в CSS – не представляет символ «m», а связь с его родительским символом font-size
.
Скажем, мы определяем:
<!DOCTYPE html>
<html>
<head>
…
<style>
.a { font-size: 40px; }
.b { font-size: 30px; }
</style>
</head>
<body>
<div class="wrapper">
<span class="a"></span>
<span class="b"></span>
</div>
</body>
</html>
Здесь мы определили а wrapper
с двумя span
элементов, каждый без содержимого. Так что наш сайт ужасен! Но мы можем отдать свое span
элементов текста, чтобы продемонстрировать, как em
работы:
…
<body>
<div class="wrapper">
<span class="a">hello from inside .a</span>
<span class="b">hello from inside .b</span>
</div>
</body>
…

Мы только что добавили текст span
элементов. И текст отображается в разных размерах, 40px
и 30px
. Установим wrapper
font-size
к 20px
а затем реорганизуйте наш .a
и .b
font-size
использование em
.
…
<style>
.wrapper { font-size: 20px; }
.a { font-size: 1.5em; }
.b { font-size: 2.0em; }
</style>
…

Что? Наши параграфы font-size
перевернулся! Теперь мы можем начать исследовать, как em
работает. Если бы мы определились font-size
как 20px
, 1em
означало бы 1 * 20px
. Поэтому 1em
как-то глупо.
Однако в нашем CSS мы определили .a
font-size
как 1.5em
и .b
font-size
как 2.0em
. Учитывая, что их отец 20px
поэтому эти выражения имеют значение 30px
и 40px
. Итак, наоборот!
Есть возражения по использованию em.
Если бы мы определили несколько родителей, например, элементы внутри элементов, каждый со своими собственными em
определен font-size
становится неинтуитивно определить, что у ребенка font-size
есть
Единица рем

rem
для root em. И grem
для Грут ем— которого не существует.
Итак, em
является множителем его родительского элемента font-size
тогда как rem
является множителем его корневого элемента font-size
. Корень?
html <- root
/ \
head body
/ \
… …
Вот что такое наш сайт – дерево! – «перевернутое» дерево!
…
<style>
html { font-size: 20px; }
.a { font-size: 1.5rem; }
.b { font-size: 2.0rem; }
</style>
…
Вот мы заменили .wrapper
с html
потому что сейчас мы используем rem
. Учитывая это, .a
и .b
теперь наследуют их font-size
от html
элемент, как предполагается нашим .wrapper
.
Обратите внимание, что ничего не изменилось — наш сайт идентичен, но мы сломали em
отец-ребенок отношения с а rem
корневой дочерний отношения.
Более того, мы можем заменить html
элемент с псевдоклассом:
:root { font-size: 20px; }
Опять же идентичны, но семантичны. Поэтому, rem
отличается от em
потому что вместо наследования родительского font-size
он прыгает к html
или :root
элемент. А если бы мы изменить :root
font-size
:
:root { font-size: 15px; }

Что произошло? Наши span
на 25% меньше — оценка до 22.5px
и 30px
— потому что мы изменили :root
font-size
. И это отличная идея. Потому что мы можем писать CSS не в правилах, а в отношениях.
Напомним: используем em
чтобы создать неглубокую связь с ближайшим отцом элемента, оценивающего a font-size
тогда как мы используем rem
создать глубокие отношения с :root
.
Запросы em и rem + media
Еще более отличная идея, чем то, как мы используем em
и rem
использует их в тандеме для медиа-запросов. Медиазапросы позволяют нам заменить CSS при определенных обстоятельствах, например, ширину веб-сайта.
Например:
…
<style>
p { color: green; }
@media (max-width: 8.5in) { p { color: blue; } }
</style>
…
Здесь p
предоставляет green
но если ширина равна или меньше чем 8.5in
так же p
читает blue
. И мы можем пойти еще дальше: вместо использования медиа-запросов для color
мы можем использовать их для font-size
:
…
<style>
:root { font-size: 20px; }
.a { font-size: 1.5rem; }
.b { font-size: 2.0rem; }
@media (max-width: 650px) { :root { font-size: 3vw; } }
</style>
…


Если наш веб-сайт отображается на уровне или меньше 650px
наш em
и rem
наследовать их font-size
не как 20px
но 3vw
, или 3% ширины области просмотра. Сделав это, мы подключили наш CSS, а не разделили его.
Последнее примечание: em
и rem
не ограничиваются font-size
. Мы можем использовать em
и rem
для описания width
, height
— там, где CSS ожидает размер. Сочетание этого с медиа-запросами делает нас супергероями CSS.
Изучение HTML и CSS не должно быть болезненным – оно может быть тонким, и эти языки могут быть достаточно мощными. И em
, rem
и grem
являются одними из самых мощных устройств в нашем распоряжении, которые мы можем использовать для разработки веб-сайтов.
Не забывайте, что есть бесплатный курс по Scrimba, где я учу, как создать тот же веб-сайт с нуля. Нажмите здесь, чтобы зарегистрироваться! ?
