Как указать адаптивные размеры элемента в моем случае?

Question

[Bolharskyi]

имеется звездный рейтинг.
Разметка:

<div class="reviews-item__grade">
     <div class="reviews-item__grade-text">Оценка</div>
     <div class="rating-stars">
          <span style="width:0%"></span>
     </div>
</div>

Стили:

.rating-stars {
    position: relative;
    height: 20px;
    font-size: 20px;
    width: 84px;
    margin-right: 15px;
}
.rating-stars::before {
    content: '★★★★★';
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .25;
}
.rating-stars > span {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    height: 100%;
}
.rating-stars > span::before {
    content: '★★★★★';
    position: absolute;
    top: 0;
    left: 0;
    color: var(--orange-color);
}

Вкратце, в зависимости от оценки рассчитывается % width для .rating-stars > span. 1 звезда = 20% ширины .rating-stars. На получившуюся ширину .rating-stars заполняется оранжевым цветом.
НО! В зависимости от разрешения экрана рейтинг заполняется цветом по разному.
Например, при оценке 5/5 (width=100%) на экране 1366px заполнены 5 звезд, а на 1440px - 4.

Как я понял, проблема в том, что все размеры я устанавливаю в пикселях.
Пробовал указывать font-size и width у .rating-stars в em и rem. Это не помогло.
Вариант с созданием медиа-запросов под каждую ширину экрана рассматриваю в последнюю очередь.

Comments

[Сергей delphinpro]

Например, при оценке 5/5 (width=100%) на экране 1366px заполнены 5 звезд, а на 1440px - 4.

Очевидно, что размер звезд во втором случае больше ширины содержащего их элемента.
Ширина никак не связана с размером звезд. Вы их задаете независимо друг от друга. Наверное на глазок. Зависимость от размера шрифта элемента может быть получена через em. То есть нужно задать ширину .rating-stars в em.

Хотя я бы лучше сделал рейтинг на svg. Это решение было бы более предсказуемым и контролируемым.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4