Изменить размер шрифта с разрешением экрана без использования запроса @media

Question

Этот код работает.

<style> 
h1{ font-size:8.5vw;} 
</style> 
<h1>Heading</h1> 

Но этот код не работает.

<style> 
h1{ font-size:8.5px;} 
</style> 
<h1>Heading</h1> 

Вопрос: Я хочу, чтобы изменить размер шрифта с разрешением экрана, как это. http://css-tricks.com/examples/ViewportTypography/ -> (минимизируйте разрешение экрана с помощью мыши для проверки). Когда я использую шрифт в VW, как font-size:7.5vw;, он работает правильно. Но когда я использую размер шрифта в PX, как font-size:40px;, он не работает.

Answer 1

Возможный трюк с использованием JavaScript для определения разрешения окна и установить свойство размера шрифта искомых элементов:

<script language="javascript"> 
    function autoResizeFont() 
    { 
     var value = function_of(window.innerWidth, window.innerHeight); 
     document.getElementById('my_container').style.fontSize = value +'px'; 
    } 
    window.onresize = autoResizeFont; 
    autoResizeFont(); 
</script> 

Где function_of функция будет реализована, которая вычисляет значение размера шрифта в пикселей от размера окна.

Другое решение с помощью JQuery:

<script language="javascript"> 
    $(document).ready(function() { 
     if ($(window).width() > THRESHOLD_VALUE) { 
      $('*').removeClass('small-font').addClass('big-font'); 
     } else { 
      $('*').removeClass('big-font').addClass('small-font'); 
     } 
    }); 
</script> 

Это решение устанавливает соответствующий класс всех HTML-элементов в зависимости от того, ширина окна больше или меньше, чем пороговое значение. Пример small-font и big-font определений могут быть:

.small-font {font-size: 10px !important} 
.big-font {font-size: 14px !important}