Должен ли я установить размер шрифта по умолчанию для тела или элемента HTML? - PullRequest
48 голосов
/ 02 августа 2011

Мне нравится работать в em с при создании сайтов.Поэтому я установил значение по умолчанию font-size из 100.01% для элемента body.

Мой вопрос: должен ли я установить значение по умолчанию font-size для элемента body или html?Каковы плюсы и минусы (если таковые имеются) обоих?

Ответы [ 3 ]

36 голосов
/ 16 июля 2012

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

20 голосов
/ 02 августа 2011

Я не верю, что есть какое-либо преимущество или недостаток в установке базы 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
18 голосов
/ 13 октября 2014

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

  • 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;
}

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

...