Есть ли способ увеличить размер шрифта с помощью CSS, чтобы он соответствовал экрану?

Question

Я думаю об улучшении титульной страницы веб-сайта OpenBSD ports, в котором перечислены около 71 категории портов.

Моя идея заключается в том, чтобы использовать пару колонок (возможно ul {-moz-columns: 9em;}also with a limit to at most 8 columns at 89em and above, @media (min-width: 89em) {ul {-moz-columns: 8;}}, эффективно указав, что должно быть в большинстве 8 колонны с минимальной шириной 9em), а также добавить некоторые padding/margin к каждому элементу списка листинга порт, но на больших экранах это может занять слишком мало экрана и оставить слишком много свободного места.

Есть ли способ автоматически увеличить шрифт определенных элементов, чтобы заполнить все доступное пространство, но не влияя на размер некоторых других элементов? Например, я хотел бы иметь заголовок и категории размером, но оставлять все кредиты внизу страницы в их обычном шрифте. Я ищу решение только для CSS. (Думаю, я мог бы разместить в нескольких конкретных правилах @media для нескольких прыжков размером, но мне было любопытно, есть ли более гибкое и автоматическое решение.)

Answer 1

Я думаю, что это то, что вы ищете: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

вы можете Vw (ширина окна просмотра) или Wh (высоту окна просмотра), где v 1 == 1% от начального содержащего блока

Пример:

p{ 
    font-size: 4vw; 
}