Как изящно запилить резиновый размер шрифта в таблице?

Question

[Александр Вульф]

Вечер добрый, коллеги! Есть у нас компонент рейтинга. У него есть "лычки" (под каждой звездой), также есть префикс (слева) и постфикс (справа).

Вопрос: как хитро написать стили, чтобы увеличивать-уменьшать размер звездочек (в проекте, естественно, иконочный шрифт вместо *) в зависимости от ширины экрана и количества звезд?

P.S: у таблицы есть класс, который показывает, сколько сейчас звезд (.count-3, .count-5, etc.).
P.P.S: https://jsfiddle.net/ocpnkqd5/
P.P.P.S: можно ставить классы, изменять структуру, все, что угодно. Table взяли из-за простоты реализации с ним.

Answer 1

[Сергей delphinpro]

Я бы заменил шрифтовые иконки звезд на svg и использовал такой принцип адаптивных иконок
https://jsfiddle.net/DelphinPRO/eutqdqv1/

Answer 2

[Алексей Струков]

попробуйте установить размер в vw
4vw думаю будет оптимальным значением.
Ну а вообще лучше для каждого размера экрана задать свой размер в em/rem

Comments

[Александр Вульф]

Сейчас так и есть. Но у нас при уменьшении кол-ва звезд шрифт должен увеличиваться. Т.е. при одинаковой ширине, но разном кол-ве звезд должен быть разный размер шрифта. Как быть? :)

[Алексей Струков]

Александр Вульф: а как количество звезд увеличивается/уменьшается?

[Александр Вульф]

Алексей Струков: в админке можно выбрать кол-во звезд от 2 до 10. Соответственно, 2 звезды должны быть большие, а 10 звезд маленькие, чтобы влезли по ширине экрана в мобилки и не было скролла.

[Алексей Струков]

Александр Вульф: а что по поводу классов .count3 и .count5?
я правильно понимаю что если вы меняете количество звезд например на 5 то таблице присваивается класс .count5?

[Александр Вульф]

Алексей Струков: ага. Можно конечно вручную задать размеры шрифта для каждого разрешения и для каждого кол-ва звезд, но это же ад.

[Алексей Струков]

Александр Вульф: у вас же всего 9 вариантов там количества звезд.
Лучще всего будет прописать в каждый класс необходимвй размер шрифта. Есть такой принцип в программировании - KISS
Вот тут ему как раз лучше всего и последовать ))

[Александр Вульф]

Алексей Струков: 9 вариантов на ~ 4 разрешения экрана = 36 вариантов. Жуть же?)

[Алексей Струков]

Александр Вульф: например можно в каждом разрешении установить шрифт в относительных единицах (типа того же vw) кроме самого большого. Нам не нужно чтобы на очень широких экранах текст становился слишком большим, больше чем нам требуется