Это зависит от вашей существующей таблицы стилей, но, вероятно, она не будет быстрой, боюсь (если вы хотите, чтобы сайт выглядел одинаково после того, как вы закончите).
Потенциальные проблемы
Когда размер текста в пикселях, визуальный размер текста будет таким же, как в CSS.Например, CSS p {font-size: 12px;} приведет к тому, что все теги <p> будут иметь размер шрифта 12 пикселей.
Однако, когда размер текста измеряется в ems, визуальный размер вычисляется относительно размера шрифтаего ближайший предок.
Итак, если у вас был следующий CSS:
body {font-size: .625em;}
p {font-size: 1.2em;}
.header {font-size: 1.5em;}
И следующий HTML:
<body>
<p>Paragraph</p>
<div class="header>
<p>Paragraph inside header</p>
</div>
</body>
Тогда визуальный размер шрифта первый абзац будет равен 1,2 (размер абзаца) × 0,625 (размер шрифта основного текста) × 16 пикселей (размер корневого шрифта по умолчанию для всех современных браузеров) = 12 пикселей .
Но визуальный размер абзаца second будет 1,2 (размер абзаца) × 1,5 (размер .header) × 0,625 × 16 пикселей = 18 пикселей .
Если у вас не так много HTML-элементов с разными размерами шрифтов, вложенных друг в друга, то все в порядке.Но вам нужно убедиться, что вы сами в HTML - это может быть трудно определить по одной таблице стилей, особенно если это большой сайт.
Подход
С точки зрения подхода, когдаОпределение размера шрифтов в ems проще всего, если дизайн вашего сайта не имеет слишком много разных размеров шрифта.Я предпочитаю устанавливать для элемента <body> наиболее часто используемый размер шрифта, например,
body {
font-size: .75em;/* 12px */
}
Тогда вы только меняете его, когда вам нужно, например,
h2 {
font-size: 1.5em; /* 16px */
}
В противном случае вы можете в конечном итоге изменить размер и размер, когда вложение произойдет.Это может быть особенно раздражающим, например, для <li> s.
Конечно, этот подход работает, только если дизайн сайта не включает много разных размеров шрифта.
Некоторые люди устанавливаютbody до 0.625em, поскольку это равно 10px (16 × 0,625 = 10), то есть для элементов, у которых нет предка с установленным размером шрифта, 1em = 10px, 1.1em = 11px и тд.Лично я думаю, что это добавляет больше сложности, чем убирает, но я никогда не делал сравнения.
В любом случае, я считаю действительно полезным помещать предполагаемый размер визуального шрифта в комментарии после каждого использования font-size, как указано выше.Таким образом, вы помните, какой размер шрифта должен был быть у элемента, если он был повторно вложен в HTML.