Если вы действительно хотите следовать правилам и при этом сохранять гибкость, вам следует учесть следующее:
html
- это root font-size, что означает, что он будет использоваться в качестве основы для расчета бэра, но это все, ничего больше. Его не следует использовать для расчета реального размера текста: для некоторых браузеров это всего лишь уловка.
body
- это размер шрифта текста по умолчанию: этот текст должен иметь весь ваш текст, если не переопределено определение
- специальные элементы должны иметь размеры в rem с отступом в пикселях
Вот так это выглядит в CSS:
html {
font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's 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's 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's 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;
}
Однако я не рекомендую этот сброс. Стандарты созданы, чтобы помочь вам избежать подобных уловок.