Назначение 62,5% размера шрифта в эластичных макетах

Question

Существует практика установки шрифта тела на 62,5%, поэтому 1 em будет равен 10 px. Также известно, что этот метод имеет некоторые недостатки.

body { 
    font-size: 62.5%; 
} 

Как указано в нескольких статьях,

Цитата Форма 1st article:

62,5% трюк является общим, и не имеет его использования в двух случаях:

• Вы хотите упростить математику, например, если вы строите эластичный макет (ширина: 30м; == ширина: 300 пикселей)

• < ...>

Цитата another article:

62,5% Hack является общим и имеет свои преимущества и недостатки.

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

Я хочу знать, как именно 62,5% -трик помогает в создании эластичных макетов. Некоторые простые примеры?

Answer 1

Если вы задали все ваши отступы/поля с помощью rem - таким образом, вы знаете 10rem = 10px, когда на 100% увеличьте масштаб браузера.

Answer 2

Это способ уйти от размеров шрифтов на основе пикселей. Рассмотрим размер шрифта 10px, который относится к его ширине, на мониторе с разрешением 3840 × 2160, но монитор физически составляет всего 13 дюймов. Символ 10px займет около трети дюйма, что очень мало и сложно увидеть.

Моя математика может быть немного выключена, но в целом использование размеров шрифтов на основе непикселя предназначено для выбора атрибутов размера шрифта без агностиков. Таким образом, шрифт всегда отображается с читаемым размером даже на мониторах с высоким значением с низким PPI.