在不使用@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}