Ответ немного не в тему, но подобная практика что вы приводите относительно плохая. Одно из ключевых удобств и причин использование rem — это уважение настроек браузера пользователя. Те мы насильно не переписываем их значения. Зная базовый стандартный размер шрифта в 16px, мы можем примерно понимать, как всё будет устроено. При этом если человек у себя изменил шрифт в настройках, то сайт будет выглядеть почти идеально.
А в вашем случае, выходит костыльный путь, который даёт ощущение меньшего кода. Так не делают.
Я уж молчу о том, что сами элементы почти всегда масштабируются не пропорционально на разных устройствах ключевых.
Ну и подход нужно с mobile-first начинать, а потом, если нужно, корректировать, те условно будет
//код общий и для мобилок
.elem {
//...
}
//код для устройств 768++
@media (min-width: 768px) {
// ...
}
//код для устройств 768++
@media (min-width: 768px) {
// ...
}
//код для устройств 1024++
@media (min-width: 1024px) {
// ...
}
//и тп
Тогда код остается контролируемым, гибким. простым и ясным. Понятно, что и где как себя ведёт.
А с вашим подходом, будет слишком много крайних случаев, когда нужно будет делать исключения, писать доп правила нарушающие логику, просто чтобы заработало и тп.
Теперь сам ответ на ваш вопрос, вам тогда нужно в каждое значение ваших media queries, помимо html, добавлять и элемент для которого будут свои, исключительные значения, ну условно
@media(max-width: 991px){
html{
font-size: 10px;
}
.shapka-element {
font-size: 12px;
}
}
Простой
