Как я могу изящно ухудшить единицы просмотра CSS?

Единицы окна просмотра CSS (vw, vh, vmin, vmax) великолепны, и я хочу начать использовать их для шрифтов, но я заметил здесь они не так широко поддерживаются. Я пытался поискать в Google любые рекомендации по плавной деградации в неподдерживаемых браузерах, но не нашел ничего полезного. Есть ли какие-нибудь лучшие способы, кроме как сделать что-то вроде:

    h1 {
      font-size: 120%;    /* for unsupported browsers */
      font-size: 5.3vmin; /* for supported browsers */
    }

Заранее спасибо!


person jlee    schedule 06.02.2014    source источник


Ответы (3)


  • Собственное использование

Вы, по крайней мере, захотите предоставить запасной вариант:

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}

Также рассказывается о имитации функциональности с помощью FitText.js.

Для получения дополнительной информации прочитайте статью Криса Койера «Типографика размера окна просмотра» http://css-tricks.com/viewport-sized-typography/

person newTag    schedule 06.02.2014
comment
В сообщении есть код, внешний ресурс - более широкое объяснение, я не вижу проблемы. - person naugtur; 08.02.2014

Вы не можете изящно уменьшить единицы области просмотра в CSS просто потому, что в старых версиях CSS нет ничего концептуально даже отдаленно похожего.

Например, установка размера шрифта на 120% вообще не решает проблему: он просто устанавливает размер шрифта в 1,2 раза больше размера шрифта родительского элемента, совершенно независимо от размеров области просмотра.

Однако можно аппроксимировать эффекты единиц области просмотра с помощью клиентского JavaScript, чтобы получить свойства области просмотра, а затем установить свойство font-size на их основе. См., например. ответы на вопрос Есть ли любой кроссбраузерный javascript для работы блоков vh и vw.

person Jukka K. Korpela    schedule 06.02.2014

Согласно Как правильно использовать окно просмотра значений css -relative-lengths?, я не думаю, что правильно использовать единицы области просмотра, не ограничивая их @media запросами минимальной высоты и ширины области просмотра, и даже в этом случае я думаю, что это следует использовать только тогда, когда вы знайте, что страница, к которой они будут применяться, очень мала (например, страница в стиле визитной карточки) и в противном случае оставит весь экран окна просмотра пустым.


Другими словами, что именно вы ищете, когда говорите font-size: 5.3vmin?

Что, если я каскадирую несколько окон одно за другим, оставляя достаточно места в каждом окне просмотра только для того, чтобы увидеть три строки обычного текста? Текст в 5.3vmin будет настолько мелким, что будет неразборчивым!

Точно так же, если у меня огромный монитор (скажем, Seiki 39" @ 3840x2160, что, я должен отметить, вполне доступен по цене ниже 400 долларов США), и вы используете font-size: 5.3vmin для всех ваших заголовков на странице с длинной статьей, то вы лишаете меня возможности и удобства, чтобы в полной мере насладиться всеми дополнительными строками текста, которые может поддерживать мой монитор, вместо этого 5 заголовков занимают более четверти экрана, который вместо этого можно было бы заполнить сотней дополнительных строк текста.

person cnst    schedule 12.05.2015
comment
хороший комментарий о лучших практиках использования viewport-relative-lengths - person jlee; 28.05.2015