В недавних проектах я использовал шрифты rem для масштабирования шрифтов, а затем использовал px как резерв для более старых версий IE.
Я также устанавливаю font-size 62,5% на html поэтому я могу более легко установить размеры шрифтов позже в таблице стилей, затем я устанавливаю размер шрифта 1.4rem на тело, поэтому элементы с неэкранированными элементами имеют базовый font-size не менее 14 пикселей, см. следующий код:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */ body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
Проблема в том, что Chrome, похоже, справляется с этим странным образом … Chrome, похоже, правильно задает размеры шрифтов при загрузке страницы, но при последующих обновлениях размер шрифта намного больше, чем должен быть.
СМОТРЕТЬ FIDDLE (HTML скопировано ниже для дальнейшего использования)
Page Title This is a test, this font should have font-size of 14px.
This is a test, this font should have font-size of 14px.
This is a test, this font should have font-size of 14px.
Помните, что вам может понадобиться нажать один или два раза в Chrome, чтобы увидеть эффект.
Кто-нибудь знает, что вызывает это, или есть ли способ вокруг него? Я совершаю преступление, установив font-size 62,5% на элемент html (я понимаю, что есть аргументы против этого)?
Пытаться:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */ *{font-size: 1.4rem;line-height: 1.6rem; } body { background: #fff; font-family: arial; }
Кажется лучше выглядеть при обновлении страницы 🙂
FIDDLE
Самое простое решение, которое я нашел, – просто изменить определение тела на
body { font-size: 1.4em; }
Потому что это тело, вам не нужно беспокоиться о компаундировании – просто используйте rems везде.
Селектор * очень медленный, как автор этой ошибки в Chrome, я бы посоветовал обходное решение, подобное этому, до тех пор, пока ошибка не будет исправлена:
body > div { font-size: 1.4rem; }
Если у вас всегда есть обертка div;)
Кажется, это ошибка Chrome; см. Проблема 319623: проблема рендеринга при использовании% + REM в CSS и / или частично объединенный дубликат: Проблема 320754: размер шрифта не наследуется, если html имеет размер шрифта в процентах, а тело в rem
Да, это известная ошибка в Chrome, которая уже связана.
я нашел
html { font-size: 100%; }
кажется, работает для меня.
Способ, которым я это исправляю, – установить абсолютный размер шрифта в элементе body. Для всех других шрифтов я использую rem:
html { font-size: 62.5%; } body { font-size: 14px; } .arbitrary-class { font-size: 1.6rem; /* Renders at 16px */ }
Ответ Патрика прав. У нас такая же проблема на Android 4.4.3 WebView.
До :
html { font-size: 62.5%; } body { font-size: 1.6rem; }
После :
html { font-size: 62.5%; } body { font-size: 1.6em; }
С em и не rem , он работает!