html - 在不使用@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 时，比如 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}