CSS Unit Battle: EMs Vs. REMs…БОРИТСЯ! ?

1656625930 css unit battle ems vs rems…boritsya

от ZAYDEK

tl;dr не используйте *просто* px

«Две единицы входят! Одна единица идет…” – ThunderDOM

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

Привет! ? Я Зайдек, и я здесь, чтобы приложить руку к изучению HTML и CSS. В этой статье мы исследуем разницу между единицами em и rem и получим понимание из первых принципов.

Когда я впервые изучил HTML и CSS, это был мир боли, потому что я неправильно понял основания. Узнав об Интернете, я хотел бы поделиться некоторыми мыслями и ободрением, потому что это может быть проще, чем вы себе представляете.

1*f375llkXaEoZFZ7ag2gbFQ
Нажмите здесь, чтобы открыть Scrimba

Я также преподавал бесплатный курс HTML/CSS на Scrimba, где учу, как создать хороший блог с нуля. Нажмите здесь, чтобы зарегистрироваться! ?

Scrimba.com – это интерактивная интерактивная платформа, где веб-сайты записываются как события, а не видео, и их можно редактировать! ?

Единица em

У него есть интересная этимология. em ничего не подозревая означает «М».

1*7oSiRfywVN_y4-GZPSH6кг
ВЫПУСК

Это кажется рекурсивным, не правда ли? Как можно 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>
    …
1*VbEg9oepDwSg4mrtTYfNfA
Нажмите здесь, чтобы открыть игровую площадку Скримбы

Мы только что добавили текст 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>
        …
1*UMgJfL52mB3OtB9I-Yviqg
Нажмите здесь, чтобы открыть игровую площадку Скримбы

Что? Наши параграфы 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 есть

Единица рем

1*_N_VW425174tKw-HRjQWMg

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; }
1*hNpvFL0jg9sfkeJ4wmYfUw
Нажмите здесь, чтобы открыть игровую площадку Скримбы

Что произошло? Наши 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>
        …
1*UwA6pNec8rhj8I8rgEoP6w
1*BzUDaxmebj4maN_U-C9k8A
Нажмите здесь, чтобы открыть игровую площадку Скримбы

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

1*f375llkXaEoZFZ7ag2gbFQ

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

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