Должен ли я устанавливать размер шрифта по умолчанию в элементе body или html?

Ответ 1

Теперь, когда устройство rem начинает становиться популярным, рекомендуется установить базовый размер шрифта на корневой элемент (тег html) (rem означает root em).

Ответ 2

Я не верю, что есть какие-либо преимущества или недостатки для установки базы font-size на html или body, чтобы разрешить калибровку с помощью ems; они будут иметь одинаковый эффект.

Не связано с вопросом:

Я бы предложил использовать другой по умолчанию font-size. Я бы установил его как:

body {
    font-size: 62.5%;
}

Это уменьшает значение по умолчанию font-size от 16px до 10px. Это делает выбор font-size намного проще, поскольку нет необходимости в сложных вычислениях. Это означает, что 1em равно 10px, и поэтому вычисление размера px является вопросом умножения на 10:

• 1.0em= 10px
• 1.4em= 14px
• 1.8em= 18px
• 2.2em= 22px

Ответ 3

Если вы действительно хотите следовать правилам и по-прежнему сохраняете гибкость, вы должны подумать об этом:

• html font-size - это размер шрифта root, что означает, что он будет использоваться в качестве базы для расчета rem, но это не что иное. Он не должен использоваться для расчета реального размера текста: это всего лишь трюк для некоторых браузеров.
• body font-size - это размер шрифта по умолчанию по умолчанию: весь текст должен иметь этот размер, если только переопределение определения
• специальные элементы должны иметь размеры в резерве, с резервными в пикселях

Итак, как это выглядит в CSS:

html {
    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
}

body {
    font-size: 0.75em; /* That is your text default font size. Here i chose 12px */
}

h1 { /* or whatever element you want to change the font size of */
    font-size: 20px; /* for browsers that don't understand the "rem" unit */
    font-size: 1.25rem; /* which equals to 20px if html font-size was set to 100% */
}

Обратите внимание, что, хотя все элементы страницы должны наследоваться от определения body, вместо этого вы можете использовать определение с включенным тегом, как часто видно в сбрасывании HTML:

a,
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-size: 0.75rem;
}

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