Содержание статьи
от 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, где я учу, как создать тот же веб-сайт с нуля. Нажмите здесь, чтобы зарегистрироваться! ?