REM vs EM - переход на относительные величины в css и html

[admin]

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

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

И когда уже на сайте сделал все, что хотел, но он явно мог бы выстрелить лучше, надо смотреть в код. Там можно найти способы сократить его размер и сделать максимально приятным для поисковых серверов. И начать я решил с уже упомянутого REM. Правда, когда стал с этим разбираться, оказалось, что есть еще и вариант EM. Поэтому решил поделиться и сразу даю ссылку на первоисточник (как минимум в благодарность, что автор текста помог мне лучше понять тему).

https://habr.com/ru/post/280125/

[admin]

В принципе несколько первых абзацев убедили меня, что я буду использовать именно REM, иначе начинаются разночтения по вложенным атрибутам, если ты где-то берешь не просто em, а 2em и т.п. Вот пример, когда em != em:

h1 {
font-size: 2em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 32px */
}

p {
font-size: 1em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 16px */
}

При использовании же REM такой проблемы нет:

h1 {
font-size: 2rem;
margin-bottom: 1rem; /* 1rem = 16px */
}

p {
font-size: 1rem;
margin-bottom: 1rem; /* 1rem = 16px */
}

[admin]

Что такое REM?

Rem - это корневой em (Root Em). Он создан, чтобы облегчить вычислительные проблемы, с которыми можно столкнуться. 1rem всегда будет равен значению font-size, которое было определено в html.

[admin]

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

https://css-tricks.com/rems-ems/

По сути взрыв мозга. Но можно находить и использовать чужие макеты, просто надо прочитать эти статьи для понимания того, что будете использовать. Чтобы потом не было вопросов, почему в коде в одном месте REM, а в другом EM, а не везде что-то одно. Спасибо опять же статьям, что прочитал их и вник. А ведь многие используют что-то одно и реально мучаются, когда надо подстроиться под разные размеры экрана, которые возникают при использовании компьютеров, планшетов и мобильных телефонов.

[admin]

И какой же молодец автор первого текста, что по ходу пояснения дает ссылки на смежные темы, которых мне бы точно не хватило. Речь о модульной сетке и вертикальному ритму, которые важны при адаптивном дизайне. То есть когда вы хотите, чтобы ваш сайт был хорошо виден как на компьютере, так и на мобильных устройствах. Другими словами, чтобы он красиво расползался или собирался при увеличении или уменьшении ширины, чего можно добиться как раз с помощью css.

Модульная сетка:
http://htmlbook.ru/content/modulnaya-setka

Вертикальные ритмы:
https://htmlacademy.ru/courses/43/run/15