Я начну свой ответ с того, что сначала обращусь к вашему заключительному заявлению, просто потому, что оно привлекло мое внимание (помимо огромной щедрости).

"хром новые стандарты-т. е. перебора? Или я делаю что-то ужасно неправильное? Я испытываю искушение просто использовать пиксели в этой точке для согласованности. "

Да и нет. У меня больше проблем с тем, что не работает в браузерах WebKit, чем в любом другом основном браузерном движке, но после изучения отдельных проблем я как правило, это происходит потому, что WebKit стремится придерживаться правил, предоставляемых W3C более жестко, чем другие.

Большинство других браузеров, кажется, очень снисходительны к разработчикам, и я люблю их за это, но мы не можем обязательно распинать WebKit за следование правилам. Чтобы распространить вышеприведенные утверждения на остальную часть вашего вопроса, я бегло просмотрел документW3C, касающийся относительной длины шрифта . Под заголовком для rem единиц Вы заметите первая строка гласит:

Равно вычисленному значению ' font-size’ на корневом элементе.

К сожалению, font-size сам по себе относительно открыт для интерпретации вашим движком broswer.

Ответ Cyrix верен в том, что Chrome будет корректировать размер шрифта на основе минимального размера шрифта, который он встроил в движок. Чтобы легко решить вашу проблему, вы можете использовать правилоtext-size-adjust или более новое правилоfont-size-adjust на вашем элементе контейнера, чтобы предотвратить это:

* { /* Replacing "*" with ".my-element" would probably be better for the rest of your site*/
    -webkit-text-size-adjust: none;
    -webkit-font-size-adjust: none;
}

Проблема, однако, заключается в том, что старые версии Chrome не принимают настройку размера шрифта, а новые версии принимают только настройку размера шрифта и только тогда, когда включены экспериментальные функции. В заключение, чтобы ответить на остальные ваши вопросы, rem и em - прекрасная единица измерения, если вы работаете с реальным текстовым контентом и т. д. Думайте в строках:

• Если вы хотите, чтобы ваши<h1> всегда были примерно на 25% больше, чем ваш основной текст h1 { font-size: 1.25rem; }
• если вы, то высота вашего заголовка всегда должна быть в 3 раза выше высоты строки текста внутри него .header { height: 3em; }

Однако, если вы работаете с блоком контейнерного типа, который должен соответствовать конкретному блоку содержимого внутри, всегда лучше работать с чем-то более стабильным. Имейте в виду, стабильность не означаетбезответственность .

Возьмем для примера:

.my-element {
  width: 95%;
  margin: auto;
  max-width: 600px;
}

Это будет плавать ваш элемент красиво расположен в середине страницы, сохраняя при этом размер элемента, который соответствует содержимому внутри него, и если размер экрана уменьшается до точки, меньшей, чем ваша высота .my-element, он будет соответствующим образом корректироваться.

Короче говоря.

Да, хром ломает вещи в масштабе, который заставляет IE ревновать, но это нормально.
• Да, многие люди пытаются использовать относительные единицы шрифта как лучшее, что можно сделать, однако вопреки тому, что они могут сказать, вам не нужно использовать это за все.
• вашим конечным результатом должна быть отзывчивая веб-страница. Ваши средства достижения этого будут отличаться в зависимости от содержания, которое вы имеете.
• масштабирование шрифта-это влияющий фактор, который, скорее всего, будет существовать некоторое время, если вы беспокоитесь о том, как это может повлиять на вашу веб-страницу, убедитесь, что только элементы, которыедолжны быть масштабированы по отношению к вашему шрифту, будут масштабироваться вместе с вашим шрифтом.
• " я испытываю искушение просто использовать пиксели в этой точке для консистенция." это логическое заключение в большинстве случаев, так что идите на это:)

Не используйте этот CSS { font-size: 62.5%; } body { font-size: 1.6rem; } это вызывает больше проблем, чем стоит, из-за того, что вы получите разные результаты в браузерах, которые используют разные базовые размеры шрифтов. Просто используйте этот сайт для расчета правильных значений rem. http://pxtoem.com/

Это должно дать вам последовательные результаты. https://jsfiddle.net/WizardCoder/gLkpz88q/3/

Обновление https://jsfiddle.net/WizardCoder/gLkpz88q/5/